jQuery中on和live的问题

Question

我有以下代码：

var $reviewButton = $('span.review_button');

$reviewButton
    .live('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

在脚本的后面，我使用AJAX调用加载了一些内容，并且另一个$('span.review_button')实例也进入了视野。我已经更新了我的代码，使用'.live'，因为click事件在由AJAX生成的评论按钮上无法工作。

这段代码可以正常工作，因为.live(click //)事件对静态和由AJAX生成的'span.review_button'都有效。

然而，我发现.live已经被弃用，所以我尝试遵循jQuery文档的说明，切换到'.on'，但当我切换到下面的代码时，我遇到了与切换到'.live'之前相同的问题，在' span.review_button '的原始实例上单击函数可以工作，但在通过AJAX生成的实例上不起作用：

var $reviewButton = $('span.review_button');

$reviewButton
    .on('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

有什么建议吗？

- absentx

---

你不能只是把.live改成.on。你需要稍微改变一下语法。查看文档：http://api.jquery.com/live/ - gen_Eric

Answer 1

事件委托的正确语法为：

$("body").on("click", "span.review_button", function() {
    $("#add_reviews").show(); 
});

在这里，您可以使用任何静态的"span.review_button"父元素，而不是body。

注意！ 如评论中所讨论的，您应该在委托事件方法中使用字符串值作为第二个参数，而不是jQuery对象。on()

- VisioN

---

不太对啊... $reviewButton 不是一个空的 jQuery 对象引用吗？ - ahren

因为如前所述，在设置$reviewButton时，文档中不存在该跨度。 - ahren

同意。我们不能在这里使用jQuery对象作为第二个参数。非常好的发现。谢谢，ahren和RocketHazmat。 - VisioN

当$reviewButton被设置时，确实存在一个span.review_button的实例。稍后会有第二个实例通过AJAX出现。 - absentx

@absentx - 通过 AJAX 后添加的元素不会成为 $reviewButton 的一部分 - 因为它只包含在你设置它时存在的元素的引用。 - ahren

Answer 2

这是因为您需要使用on()的委托版本。

$("#parentElement").on('click', '.child', function(){});

#parentElement 必须在绑定事件时存在于 DOM 中。

事件将沿着 DOM 树冒泡，一旦到达 #parentElement，就会检查其来源，如果匹配.child，则执行该函数。
因此，在绑定事件时，最好将其绑定到现有 DOM 中最近的父元素上以获得最佳性能。

- ahren

Answer 3

将您的第一个选择器（在本例中为div.content）设置为包含点击按钮以及使用AJAX添加到DOM中的任何DOM的父容器。如果由于某种原因必须更改整个页面，甚至可以更改为“body”，但是您要尽量使选择器有效，因此将其缩小到最接近的不会更改的父DOM元素。

其次，您要将单击操作应用于span.review_button，因此代码如下所示。

// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
    $('#add_reviews').show(); 
});

- Francis Lewis

---

更新以反映。 - Francis Lewis