jQuery live似乎没有绑定单击事件

ajsxfq5m  于 2022-12-26  发布在  jQuery
关注(0)|答案(3)|浏览(146)

动态添加的链接(类名.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));
    });
});
gz5pxeao

gz5pxeao1#

$(...).toggle并没有立即执行任何操作,它只是将click事件绑定到选定的元素,以便将来单击时会调用这两个函数中的一个。因此,第一次单击只会设置toggle事件处理程序,第二次单击实际上会调用toggle事件处理程序。(并且还添加了 * 另一个 * 切换事件处理程序!所以第三次单击调用 * 两个 * 切换事件处理程序,以此类推。)
.toggle.click绑定的替代方法,而不是(通常)在.click事件处理程序中使用的方法。
toggle没有“live”版本,但您可以自己编写一个,例如:

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() {
    ...
});
uajslkp6

uajslkp62#

这是一个很长的机会,但这是因为你有事件。在所有其他代码之前?我通常使用它作为函数的最后一条语句。
就像我说的,这是一个长期的机会,但值得一试!
您是否尝试过显示javascript警报或使用Firebugs日志窗口来查看事件是否是第一次触发?也许它是触发了,但没有按照您的预期进行,或者是其他原因导致它失败?

olhwl3o2

olhwl3o23#

所以这就是我最后的结果看起来还可以。

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

});

相关问题