Question

我有以下代码：

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

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

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

        }
    )

稍后在脚本中，我使用AJAX调用来加载一些内容，另一个$（'span.review_button'）实例进入图片。我更新了上面的代码以使用'.live'，因为click事件不能与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(); 

        }
    )

建议？

Answer 1

事件委托的正确语法是：

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

此处代替body，您可以使用"span.review_button"的任何静态父元素。

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

Answer 2

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

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

绑定事件时，

#parentElement必须存在于DOM中。

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

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

关于on和live的jquery问题

3 个答案: