Uso di jQuery .live con l'evento di commutazione

Question

Il mio codice funziona, ma mi richiede di fare clic due volte per attivare il concatenamento (una volta per l'evento clic e una volta per l'evento di attivazione.) Che cosa posso fare per renderlo così solo fare clic una volta in modo che si attivi automaticamente l'interruttore?

//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); 
    }); 
}); 

Grazie!

Answer 1

Non è possibile utilizzare live e toggle insieme. Cosa si può fare, è semplicemente fare il proprio "toggle" di sorta:

$('#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 è vincolante per click, tuttavia, quando toggle si chiama, è anche legato (normalmente) al clic. Dovresti decidere se "live" è davvero ciò di cui hai bisogno. Ad esempio, se l'oggetto #showHideComments viene sostituito tramite AJAX durante l'utilizzo della pagina, allora hai bisogno di live e della mia soluzione. Tuttavia, se non viene scambiato e rimane lo stesso, usa semplicemente l'interno della tua funzione originale live (solo il codice di attivazione/disattivazione) e sarai d'oro.

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'); 
}); 

Questo funziona anche :)

Answer 3

Meglio ancora, utilizzare $ (questo) per la leva in modo che si riferisce al genitore - questo funziona meglio con più istanze basate su classi o oggetti unici di cui da ID al genitore:

$('#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 è obsoleto. Utilizzare on invece Per esempio:

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