Question

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

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

此代码可以正常工作，而不是$('.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>

Answer 1

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

可能会有所帮助

Answer 2

在页面加载时需要获取现有元素，在本例中为 ul元素，请尝试此操作。

＆＃13;

$(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();
    });
  });
});

＆＃13;

<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>

＆＃13;

单击动态添加元素的事件

2 个答案: