jQuery live () - pérdida de funcionalidad - live () sin hacer clic: ¿pero en la tecla Intro?

Tengo una pregunta sobre la función live() de jQuery.

Estoy programando un foro. Tan pronto como alguien publica algo y presiona Intro, jQuery agrega las otras publicaciones y también inserta un área de texto para comentarios, a la que se aplica el siguiente controlador de eventos:

//Comment on a post
$('.commenttext').keyup(function(e) {
    if (((e.keyCode || e.which) == 13) && !event.shiftKey) {
        comment($(this));
    }
});

Luego se llama a la función para publicar un comentario, bueno, al menos debería ser así. Para las publicaciones antiguas funciona bien, pero no para la que se acaba de publicar y agregar.

Sé que es posible preservar la funcionalidad usando la función live(). Sin embargo, como puede ver, la publicación se envía al presionar Intro, no hay ningún botón involucrado. Así que me pregunto cómo combinar estas cosas, es decir, usando live() pero sin hacer clic:?

FYI, la función para publicar algo se ve así:

//Function to post
function post()
{
    //Get posttext and preserve line breaks
    var posttext=$('#posttext').val();

    //Ajax if posttext is not empty
    if(posttext!="")
    {
        $.ajax({
            //blablabla
            success: function(postid){

                //Prepend posts with the new post
                var newpost=posttext+'<br/><textarea id="commenttext'+postid+'" class="commenttext" placeholder=" Comment..."></textarea>';
                $(newpost).hide().prependTo('#postsDiv').fadeIn('slow');

            }
        });
    }
}

ACTUALIZACIÓN 1:

Cambié el controlador de eventos para publicar algo en esto, que se publica bien, pero aún así la funcionalidad no está allí:

//Post something
$('#postDiv').on('keyup', '#posttext', function(e) {
    if ((e.which == 13) && !event.shiftKey) {
        post($(this));
    }
});

ACTUALIZACIÓN 2:

Funciona por ahora :) No sabía que tanto comment() como post() tenían que estar activos. Ahora tengo las siguientes dos funciones:

//Post something
$('#postDiv').on('keyup', '#posttext', function(e) {
    if ((e.which == 13) && !event.shiftKey) {
        post($(this));
    }
});

y

//Comment on a post
$('.commenttext').live('keyup', function(e) {
    if (e.which == 13 && !event.shiftKey) {
        comment($(this));
    }
});

Funciona bien, pero sería mejor usar también on() para comentar. He intentado esto:

$('.commentsDiv').on('keyup', '.commenttext', function(e) {
    if ((e.which == 13) && !event.shiftKey) {
        post($(this));
    }
});

pero no funciona, ¿por qué? commentsDiv es el elemento principal de commenttext, que es el área de texto del comentario. ¿Necesito abordarlo con una identificación?

Gracias :)

preguntado el 03 de mayo de 12 a las 21:05

FYI, jQuery ya normaliza el objeto de evento por lo que no hay necesidad de (e.keyCode || e.which). Solo usa e.which. Mas en api.jquery.com/category/events/event-object -

Puedes probar $(document).on('keyup', '.commenttext', function(e) { -

@Rocket gracias, el problema se ha resuelto. -

2 Respuestas

.live se puede usar con cualquier evento que desee, no solo click (incluso eventos personalizados).

$('.commenttext').live('keyup', function(e) {
    if (e.which == 13 && !event.shiftKey) {
        comment($(this));
    }
});

NOTA: Si está usando jQuery 1.7+, ya no debe usar .live, Deberías usar .on preferiblemente.

$(document).on('keyup', '.commenttext', function(e) {
    if (e.which == 13) && !event.shiftKey) {
        comment($(this));
    }
});

En lugar de document, debe usar el padre más cercano (aunque este elemento no debe eliminarse del DOM, si se elimina, los eventos también se eliminan).

PS e.which está normalizado en jQuery, lo que significa que sí e.keyCode || e.which para ti.

Docs: http://api.jquery.com/category/events/event-object/

contestado el 03 de mayo de 12 a las 21:05

ok, el área de texto para las publicaciones está en el div #postDiv, por lo que debería ser $('#postDiv').on(), ¿verdad? - Weltschmerz

ok, he agregado el código como dijiste (ver edición de preguntas) y se publica bien, pero no agrega funcionalidad ... ¿hay alguna alternativa? - Weltschmerz

@Dennis: ¿Qué es exactamente #posttext? - Cohete Hazmat

#posttext es el área de texto donde puede escribir una publicación y enviarla con la tecla Intro. Weltschmerz

No probado, pero sospecho que esto... ¿debería... funcionar?

$('.commenttext').live('keyup', function(e) {
  if (((e.keyCode || e.which) == 13) && !event.shiftKey) {
    comment($(this));
  }
});

contestado el 03 de mayo de 12 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.