动态添加元素上的click事件

debugcn 发表于 Dev

用户名

我读了几乎所有我能找到的东西，但找不到我的问题的解决方案。

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

如果不使用$('.list-item').on('click...'我的id而不是我的代码，则此代码可以正常工作$('#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>

奥兰多·查尔斯（Orlando Charles）

页面加载时需要获取一个现有元素，在此示例中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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。