javascript - jQuery 按类单击功能不起作用

Question

这个问题已经有答案了:

How do I attach events to dynamic HTML elements with jQuery? [duplicate] (8 个回答)

已关闭 8 年前。

我有两个不同类别的列表，

<li><a href='#' class="cls1" name="X">blah</a></li> <!-- Click to load a cls2 item -->
<li><a href='#' class="cls1" name="Y">blah</a></li>

<li><a href='#' class="cls2" name="A">blah</a></li>
<li><a href='#' class="cls2" name="B">blah</a></li>

我有这个脚本来处理点击功能。

$(function(){
$('.cls1').click(function(e){
    alert('cls1 clicked');
    e.preventDefault();
    ... //ajax call to load cls2 items
    });
$('.cls2').click(function(e){
    alert('cls2 clicked');
    e.preventDefault();
    ...
    });
)};

重要 cls2 类项由 cls1 点击函数中调用的 ajax 函数加载

cls1 项目单击功能工作正常，但是当我单击任何 cls2 项目时，没有任何反应。

整个页面加载后添加有什么问题吗？ (通过ajax调用)

我注意到的另一个问题是，如果我刷新页面，然后在代码中将 cls1 类更改为 cls2(使用 Chrome 控制台)，CSS 会正确更改，但它仍然执行 cls1 单击功能。为什么？？？

有什么想法吗？我尝试过更改点击函数顺序，更改类名，甚至使用另一个 jquery 库...(我使用的是 v1.11.1)

此处的问题示例:http://jsfiddle.net/f7o5y3ek/

Answer 1

将 cls2 点击处理程序添加到 ajax 成功部分或尝试这样做:

$(document).on('click, '.cls2', function(e){
    alert('cls2 clicked');
    e.preventDefault();
    ...
    });
)};