Question

动态添加的链接（类名.divToggle和.removeDiv）仅在第一次单击两次时才起作用。什么阻止他们马上正常工作？

$(document).ready(function(){
// adds click event to links.
$('a.divToggle').live('click', function(event) {
    // Toggles the visibility of divs.
    event.preventDefault;
    $(this).toggle(function(){
            $(this).next(".divToToggle").slideUp("slow");
            $(this).text("show[+]");
    },
    function(){
            $(this).next(".divToToggle").slideDown("slow");
            $(this).text("hide[-]");
    });     
});

// used to remove divs from the page.
$("a.removeDiv").live("click", function(event) {
    event.preventDefault;
    $(this).parent().prev("a").prev("h2").remove();
    $(this).parent().prev("a").remove();
    $(this).parent().next("br").remove();
    $(this).parent().remove();  
}); 

// Used to add new divs to the page.
$(".addDiv").click(function(){
    $("<h2>Title Area</h2><a href='#' class='divToggle'>hide[-]</a>"
    + "<div class='divToToggle'><a href='#' class='removeDiv'>Remove this div</a>"
    + "<ul><li>List element 1</li><li>List element 2</li>"
    + "<li>List element 3</li></ul></div><br />").insertBefore($(this));
});

}）;

Answer 1

$(...).toggle不会马上做任何事情。它只是将单击事件绑定到所选元素，以便将来单击会导致调用这两个函数中的一个。因此，第一次单击只会设置切换事件处理程序。第二次单击实际上调用了切换事件处理程序。（并且还添加另一个切换事件处理程序！所以第三次单击调用两个切换事件处理程序，依此类推。）

.toggle是.click绑定的替代方法，而不是（通常）在.click事件处理程序中使用的方法。

toggle没有'实时'版本，但你可以自己写一个，例如：

function livetoggle(selector, f0, f1) {
    $(selector).live('click', function(event) {
        var t= $(this).data('livetoggle');
        $(this).data('livetoggle', !t);
        (t? f1 : f0).call(this, event);
    });
}


livetoggle('a.divToggle', function() {
    ...
}, function() {
    ...
});

Answer 2

这是一个很长的镜头，但这是因为你有event.preventDefault;在所有其他代码之前？我通常使用它作为我函数中的最后一个语句。

就像我说这是一个很长的镜头，但值得一试！

您是否尝试过显示javascript警报或使用Firebugs日志窗口来查看该事件是否第一次被触发？也许它被解雇但没有做你期望的事情而其他东西导致它失败了？

Answer 3

所以这就是我最终的结果。似乎工作正常。

$(document).ready(function(){

// adds click event to links.
$('a.divToggle').live('click', function() {
   var testText = $(this).text();
   if(testText == 'hide[-]') {
    $(this).next('.divToToggle').slideUp('slow');
    $(this).text('show[+]');
   } else {
    $(this).next('.divToToggle').slideDown('slow');
    $(this).text('hide[-]');
   }
})

// used to remove divs from the page.
$('a.removeDiv').live('click', function(event) {
    $(this).parent().prev('a').prev('h2').remove();
    $(this).parent().prev('a').remove();
    $(this).parent().next('br').remove();
    $(this).parent().remove();
    return false;
});

// Used to add new divs to the page.
$('.addDiv').click(function(){
    $("<h2>Title Area</h2><a href='#' class='divToggle'>hide[-]</a>"
    + "<div class='divToToggle'><a href='#' class='removeDiv'>Remove this div</a>"
    + "<ul><li>List element 1</li><li>List element 2</li>"
    + "<li>List element 3</li></ul></div><br />").insertBefore($(this));
    return false;
});

}）;

jQuery live似乎没有绑定click事件

3 个答案: