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

This question already has answers here:

How do I attach events to dynamic HTML elements with jQuery? [duplicate]
                                
                                    （8个答案）
                                
                        
                5年前关闭。
            
        

我有两个类别不同的​​清单，

<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 click函数中调用的ajax函数加载的

cls1项目单击功能工作正常，但是当我单击任何cls2项目时，什么也没有发生。

在整个页面加载后添加它是否有任何问题？ （通过ajax调用）

我注意到的另一个问题是，如果刷新页面，并且在代码中（使用chrome控制台）将cls1类更改为cls2，则css会正确更改，但仍会执行cls1 click函数。为什么？？？

任何想法？我试图更改单击功能的顺序，甚至使用另一个jquery库也要更改类名...（我正在使用v1.11.1）

这里的问题示例：http://jsfiddle.net/f7o5y3ek/

最佳答案

将cls2 click处理程序添加到ajax成功部分或尝试以下操作：

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