jquery - AJAX 调用后 JQuery 事件没有响应

Question

我正在设计一个多面搜索，我有一个简单的 ul 块。每个列表项都有不同的数据值，我想在单击数据值为“6000003”的列表项时做出响应。下面的代码有效，但在使用 AJAX 调用刷新数据后无效。

在 AJAX 调用之后，我仍然有一个数据值为“6000003”的列表项，但它不响应点击。

<ul class='refine_checkbox'>
    <li class='refine_checkbox' data-val='24000022'>List Item 1</li>
    <li class='refine_checkbox' data-val='24000023'>List Item 2</li>
    <li class='refine_checkbox' data-val='6000003'>List Item 3</li>
</ul>

$('li[data-val="6000003"]').click(function(){ 
    // Do something 
});

我想我可能需要附加一个事件处理程序，所以我查看了 Jquery.on() 函数并尝试了这个，但它不起作用：

$('li[data-val="6000003"]').on('click', 'li', function(){ 
    // Do something 
});

任何人都可以帮忙吗？

Answer 1

.on()委派时使用的正确方法是：

$('.refine_checkbox').on('click', 'li[data-val=600003]', function(){ 
    // Do something 
});

您将处理程序绑定到静态元素，并在参数中指定动态选择器。

Answer 2

如果您可以提供一个独特的 ID，那就太棒了。现在尝试这样的事情。

$(document).on('click', 'li[data-val="6000003"]', function(){ 
// Do something 
});

Answer 3

li这是因为正在添加新元素，但没有添加点击处理程序。

尝试这个：

$('body').on('click', 'li[data-val="6000003"]', function(){ 
    // Do something 
});