Uso de jQuery .live con el evento de alternar

Question

Mi código funciona, pero requiere que haga clic dos veces para activar mi encadenamiento (una para el evento de clic y otra para el evento de alternar). ¿Qué puedo hacer para que solo tiene que hacer clic una vez para que el alternar se produzca automáticamente?

//Show or Hide Comments 
$('#showHideComments').live('click', function() { 
    $('#showHideComments').toggle(function() { 
     $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500); 
     $("#comments").fadeIn(300); 
     $("#addComment").fadeIn(300); 
    },function(){ 
     $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500); 
     $("#comments").fadeOut(300); 
     $("#addComment").fadeOut(300); 
    }); 
}); 

Gracias!

Answer 1

No puede usar live y toggle juntos. Lo que puede hacer, es simplemente hacer su propio "cambiar" de clases:

$('#showHideComments').live('click', function() { 
    if($("#addComment").is(':visible')){ 
     $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500); 
     $("#comments, #addComment").fadeOut(300); 
    } else { 
     $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500); 
     $("#comments, #addComment").fadeIn(300); 
    }; 
}); 

live es vinculante para click, sin embargo, cuando toggle se llama, también está obligado (normalmente) al hacer clic. Debería decidir si 'en vivo' es realmente lo que necesita. Por ejemplo, si se reemplaza el objeto #showHideComments a través de AJAX durante el uso de la página, entonces necesita en vivo y mi solución. Sin embargo, si no se intercambia y sigue siendo el mismo, simplemente use el interior de su función original live (solo el código de alternancia) y estará dorado.

Answer 2

//Show or Hide Comments 
$('#showHideComments').live('click', function() { 
    $('#showHideComments').toggle(function() { 
     $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500); 
     $("#comments").fadeIn(300); 
     $("#addComment").fadeIn(300); 
    },function(){ 
     $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500); 
     $("#comments").fadeOut(300); 
     $("#addComment").fadeOut(300); 
    }).trigger('click'); 
}); 

Esto también funciona :)

Answer 3

Mejor aún, utilice $ (este) de la palanca por lo que se refiere a los padres - esto va a funcionar mejor con varias instancias en base a clases u objetos únicos que se hace referencia por ID en la matriz:

$('#showHideComments').live('click', function() { 
    $(this).toggle(function() { 
     $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500); 
     $("#comments").fadeIn(300); 
     $("#addComment").fadeIn(300); 
    },function(){ 
     $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500); 
     $("#comments").fadeOut(300); 
     $("#addComment").fadeOut(300); 
    }).trigger('click'); 
}); 

Answer 4

live está obsoleto. Utilice on lugar Por ejemplo:

$(document).on 'click', 'a[data-object="save-post"]',() -> 
    alert 'Saving the post...'