jQuery live 似乎没有绑定(bind)点击事件

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 不会立即执行任何操作。它只是将单击事件绑定(bind)到所选元素，以便将来单击会导致调用两个函数之一。因此，第一次单击除了设置切换事件处理程序外什么也不做。第二次单击实际上调用了切换事件处理程序。 (并且还添加另一个切换事件处理程序!因此第三次单击调用两个切换事件处理程序，依此类推。)

.toggle 是 .click 绑定(bind)的替代方案，而不是您(通常)在 .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() {
    ...
});