Question

我有两个不同类的列表，

<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电话）

我注意到的另一个问题是，如果我刷新页面，并且我将cls1类更改为代码中的cls2（使用chrome控制台），css会正确更改，但它仍然执行cls1单击功能。为什么???

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

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

Answer 1

如果我理解正确，您的问题是您正在向尚不存在的元素添加事件侦听器。在您的ajax调用创建这些元素之后，您必须添加.cls2侦听器。

像这样的东西（换成Coffeescript，抱歉）：

$.ajax("path/to/call", {
  success: (function(_this) {
    return function() {
      return _this.addItems;
    };
  })(this)
});

({
  addItems: function() {
    // add new items & listeners here
  }
});

或者，我认为更好的是使用事件委托，如下所示：

$( "parent_selector" ).on( "click", ".cls2", function( event ) {
    event.preventDefault();
    console.log( "clicked!" );
});

Answer 2

将cls2点击处理程序添加到ajax成功部分或尝试使用：

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

jQuery点击功能不能正常工作

2 个答案: