动态添加元素的点击事件答案

【问题标题】：click event on dynamically added elements动态添加元素的点击事件
【发布时间】：2017-01-18 14:33:12
【问题描述】：

我几乎阅读了我能找到的所有内容，但找不到解决问题的方法。

$('.list-item').on('click', 'p', function(){
    $(this).next('.list-item small').toggle();
});

如果我输入一个 id 而不是 $('.list-item').on('click...'，则此代码可以正常工作。 $('#someid').on('click...' 我不知道为什么或如何让我的代码工作

这是我的 HTML

<ul>
    <li class="list-item">
        <p>sometext</p>
        <small>sometext</small>
    </li>
    <li class="list-item">
        <p>sometext</p>
        <small>sometext</small>
    </li>
    <li class="list-item">
        <p>sometext</p>
        <small>sometext</small>
    </li>
</ul>

【问题讨论】：

怎么了？这工作正常。
当我单击
时，它不会切换。我说的是动态创建的元素

标签： jquery dynamic click elements

【解决方案1】：

$('.list-item').on('click', 'p', function(){
    $(this).next('.list-item.small').toggle();
});

可能有帮助

【讨论】：

【解决方案2】：

页面加载时需要获取现有元素，在本例中 ul 元素，试试这个。

$(document).ready(function(){
  
  $(function(){
    $("input").on("click", function(){
      $("ul").append('<li class="list-item">\
        <p>sometext</p>\
        <small>sometext</small>\
       </li>');
    });
  });
  
  $(function(){
    $('ul').on('click', 'li p', function(){
      $(this).next('.list-item small').toggle();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<input type="button" value="Click me!">

<ul>
    <li class="list-item">
        <p>sometext</p>
        <small>sometext</small>
    </li>
</ul>

【讨论】：