jQuery live似乎没有绑定click事件

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事件处理程序中使用的东西.

没有'live'版本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() {
    ...
});