Question

当我点击li时，我创建了一个新的li。但是，单击“我希望新列表项上出现相同事件”，因此我使用了：

$('ul').on( 'click', $this, function(){

但是现在内容已重复！

<ul>
  <li>1</li>
  <li>2</li>
</ul>

JS：

(function(){
    $('li').each(function(){
        var $this = $(this);
        $('ul').on( 'click', $this, function(){
            $('ul').append('<li>new</li>');
        });
    });
})(jQuery)

http://jsfiddle.net/24cnwmqv/1/

我只想要当您单击现有或新列表项时，得到1个新创建的列表项。谢谢。

Answer 1

只需使用：

$('ul').on( 'click', 'li', function(){
  $('ul').append('<li>new</li>');
});

这里是updated fiddle。

Answer 2

问题是因为您要在click循环中复制each事件处理程序-删除它。然后使用li作为选择器，而不是$li引用：

(function() {
  $('ul').on('click', 'li', function() {
    $('ul').append('<li>new</li>');
    
    var index = $(this).index();
    console.log(index);
  });
})(jQuery)

li {
  background: #ccc;
  width: 50px;
  padding: 5px 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
</ul>

您可能还需要考虑更改逻辑，使其仅附加到父ul而不是附加到当前DOM中的所有逻辑：

$(this).closest('ul').append('<li>new</li>');

附加事件处理程序和每个函数

2 个答案: