jQuery next() 无法与 live() 一起使用

Question

当我尝试使用 jQuery next() 方法时，它无法与 live() 一起使用。

首先，这是我的代码：

$(".toggle_button").live('click', function() {
    $(this).html($(this).html() == '-' ? '+' : '-');
    $(this).next(".info_section").toggle(400);
});

这是 HTML

<div class='section_toggle_container'>
    <div class='toggle_button'>-</div>
    <strong>Driver Information:</strong>
</div>
<div class='info_section'>
    info here
</div>

问题是否可能在于 .toggle_button 嵌套，导致 .info_section 无法访问？

第二行效果很好，因为它正在修改给定 live() 事件的元素。然而，第三行是问题所在。这是因为它使用了 next()。

谁能帮我解决 next() 问题？

Answer 1

查看 HTML，您的声明不应该

$(this).next(".info_section").toggle(400);

是：

$(this).parent().next(".info_section").toggle(400);

Answer 2

虽然您有可行的答案，但我想留下关于切换 - 和 + 的建议，我建议使用 text() 而不是 HTML，并使用固有的 text（对于 text()，html 对于 html()） ：

$(".toggle_button").live('click', function() {
    $(this).text(function(index,text) {
        return text == '-' ? '+' : '-';
    });
    $(this).parent().next(".info_section").toggle(400);
});

此外，我建议缓存您的 $(this)，如果您多次调用它，那么值得使用缓存来防止随后重新创建它，从而导致：

$(".toggle_button").live('click', function() {
    var $this = $(this);
    $this.text(function(index,text) {
        return text == '-' ? '+' : '-';
    });
    $this.parent().next(".info_section").toggle(400);
});

当然，如果您使用的 jQuery 版本大于或包含 1.7，那么您应该使用 on() 方法，而不是（自 jQuery 1.7 起）已弃用的 live()，这将给出：

$(".toggle_button").on('click', function() {
    var $this = $(this);
    $this.text(function(index,text) {
        return text == '-' ? '+' : '-';
    });
    $this.parent().next(".info_section").toggle(400);
});

不过，这实际上只是建议，不幸的是，作为答案发布，以防止将难以理解的代码粘贴到评论中。

参考文献：

• html()。
• live()。
• on()。
• text()。