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

AJAX调用后JQuery事件没有响应

3 个答案: