no consigo que funcionen los eventos jquery

[|Miguel|]

hola a todos ¿qué tal?

tengo un problemilla con el evento keyup de jquery: no es llamado si quiera... :S
este es mi formulario:

Código (html4strict) [Seleccionar] Expandir


<form method="post" id="search-form">
    Search for:
    <input id="searched-word" name="searched-word" />
    <input id="btnSearch" class="btnSearch" name="btnSearch" type="button" value="Search" class="btnSearch"
           onclick="javascript:buscar($('#searched-word').val());" />
</form>


y aquí el archivo js (resalto en negrita la parte que no me funciona):

Código (javascript) [Seleccionar] Expandir

$(document).ready(function() {   
    $('.menu li a').click(function() {
       
         /* Muestro una animación de carga */
        ($('.content')).addClass("loading");
        ($('.modal')).css('display', 'block');
       
        /* Cambio la pestaña activa */
        $('.menu li a').removeClass('active');
        $(this).addClass('active');
       
        /* Y cargo en el contenedor la página que se esté pìdiendo */
        $('#contenido').load($(this).attr('destino'));
       
        /* Quito la animación */
        ($('.modal')).css('display', 'none');
        $('.content').removeClass("loading");
       
        return false;
    });
   
    [b]$("#searched-word").keyup(function( event ) {
        alert( event );
    }).keydown(function( event ) {
        if ( event.which == 13 ) {
            event.preventDefault();
        }
    });[/b]

});


function buscar(palabra){
    if(palabra.length > 0){
        var parametros = {
            "searched-word" : $('#searched-word').val()
        };
        $.ajax({
            data:  parametros,
            url:   'search.php',
            type:  'post',
            beforeSend: function () {
                $("#resultado").html("Searching. Please, wait.");
            },
            success:  function (response) {
                $("#resultado").html(response);
            }
        });

    }
    else{
        alert('You must write something to search for!');
    }
}


Básicamente lo que quiero es controlar que si se pulsa enter no se haga submit del formulario para que no se recargue la página, porque estoy cargando los resultados por ajax en la misma página...
a ver si me podéis echar un cable.

he probado llamando al evento por id ($("#searched-word").keyup(function( event )) y por clase ($(".searched-word").keyup(function( event )) pero nada, ni si quiera se llama al evento.

por cierto, ya que estoy, el evento de arriba (el del click del menú) sólo me funciona si lo pongo como una clase, si lo pongo por id tp me funcionaba...

Gracias

[#!drvy]

El código tal cual esta debe funcionar. Pero si generas ese formulario por ajax seguramente no funcionara por el tema de DOM cache.
Tienes que hacerlo de otra forma..

Código (javascript) [Seleccionar] Expandir

$("body").on('keyup','#searched-word',function(event){
alert(event);
}).on('keydown','#searched-word',function(event){
if (event.which == 13) {
event.preventDefault();
}
});

por cierto, ya que estoy, el evento de arriba (el del click del menú) sólo me funciona si lo pongo como una clase, si lo pongo por id tp me funcionaba...

Lo mismo, si lo generas por ajax usa on sobre el body y indica el elemento tal y como se muestra en el código que te deje.

Saludos

[|Miguel|]

Perfecto @drvymonkey, muchas gracias!