Использование jQuery.live с событием toggle

Мой код работает, но мне нужно дважды щелкнуть, чтобы активировать мою цепочку (один раз для события клика и один раз для события переключения). Что я могу сделать, чтобы сделать это, поэтому мне нужно только щелкнуть один раз, чтобы автоматически переключится?

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

Спасибо!

Ответы

Ответ 1

Вы не можете использовать live и toggle вместе. Что вы можете сделать, просто сделайте свой собственный "переключение":

$('#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 является привязкой к click, однако, когда вызывается toggle, он также связан (обычно) при щелчке. Вы должны решить, действительно ли "жить" - это то, что вам нужно. Например, если #showHideComments объект заменяется через AJAX во время использования страницы, тогда вам нужно жить и мое решение. Однако, если он не поменяется и остается неизменным, просто используйте внутреннюю часть вашей оригинальной функции live (только код переключения), и вы будете золотыми.

Ответ 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');
});

Это также будет работать:)

Ответ 3

Еще лучше, используйте $(this) для переключения, поэтому он ссылается на родителя - это будет работать лучше с несколькими экземплярами на основе классов или уникальных объектов, передаваемых идентификатором родителя:

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

Ответ 4

live устарел. Вместо этого используйте on Например:

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