jQuery live似乎无法绑定点击事件

Question

jQuery live似乎无法绑定点击事件

4

动态添加的链接（classnames为 .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));
    });
});

- Kyle

这是哪个版本的jQuery？它是特定于浏览器还是通用的？我在IE中遇到了live()点击事件的问题（在以前的jQuery版本中有过，不确定1.4版本是否有此问题）。 - Tom

Jquery 1.4.1在Mac上使用Firefox和Chrome。 - Kyle

3个回答

0

这就是我最终得到的结果。看起来运行得还不错。

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

});

- Kyle

0

这可能是一个长期的尝试，但是因为您在所有其他代码之前有 "event.preventDefault;"？我通常在我的函数中使用此语句作为最后一条语句。

就像我说的那样，这可能是一个长期的尝试，但值得一试！

您是否尝试过显示javascript警报或使用Firebug日志窗口以查看事件第一次被触发了吗？也许它已经被触发了，但不是您所期望的，并且其他原因导致了失败？

- Fermin

preventDefault 实际上没有被调用（缺少 ()），因此它并没有起到任何作用。 - bobince

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

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