3

我有以下代码：

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

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

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

        }
    )

稍后在脚本中，我使用 AJAX 调用加载一些内容，并且 $('span.review_button') 的另一个实例进入图片。我更新了上面的代码以使用“.live”，因为单击事件无法与 AJAX 生成的评论按钮一起使用。

此代码有效，因为 .live(click //) 事件适用于静态“span.review_button”和 AJAX 生成的“span.review_button”

但是我看到 .live 已被弃用，所以我尝试通过切换到“.on”来遵循 jquery 文档说明，但是当我切换到下面的代码时，我在切换到“.live”之前遇到了同样的问题click 函数适用于“span.review_button”的原始实例，但不适用于 AJAX 生成的实例：

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

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

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

        }
    )

建议？

4

3 回答 3

8

事件委托的正确语法是：

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

在这里，您可以body使用."span.review_button"

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

于 2012-12-04T21:30:32.787 回答
6

这是因为您需要使用on().

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

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

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

于 2012-12-04T21:30:54.567 回答
3

将您的第一个选择器（在本例中为 div.content）设置为包含单击按钮以及将使用 AJAX 进入的任何 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(); 
});
于 2012-12-04T21:36:10.083 回答