Question

我有几个li个元素会动态添加到ul列表中。在每个li元素中，都有一个按钮。我想在每个按钮上附加一个click事件，并且在事件处理程序中，我希望获得单击其按钮的li所特有的属性。

这个（非功能性）代码说明了我想要的内容：

$('ul > li > button').each('click', function(){

    var asdf = $('somehow access any arbitrary element in the li whose button was clicked').html();

});

我当前的解决方案（下面）有效，但它强制我为每个li设置一个id，表示它在列表中的位置，由于各种原因我不想这样做。

// In the response function of the AJAX call that populates the list:

$('ul > li').each(function(i){
  $('button', this).click(function(){

    var name = $('ul > li#item'+i+' > .name').html();

  });
});

有更好的方法吗？

Answer 1

您需要使用click委派.on()事件，而不是在DOM中动态创建元素时绑定click事件。

 $(document).on("click", 'ul',function(){    
    var name = $(this).find('li#' + num).html();
    alert(name);
  });

工作示例：https://jsfiddle.net/DinoMyte/Lkb0s60n/

事件委托是指使用事件传播的过程（冒泡）处理DOM中更高级别的事件而不是事件发生的元素。它允许我们附加单个现在或将来存在的元素的事件监听器。

来源：https://learn.jquery.com/events/event-delegation/

Answer 2

我会推荐像

这样的东西

$('ul > li > button').click(function(){
    var parent_li = $(this).parents('li'); //You can use class of li.
    var name = parent_li.html(); // Or whatever you want. In this case $(this) is the clicked element
});

Answer 3

JSFiddle

<强> JS：

// In the response function of the AJAX call that populates the list:
jQuery('ul > li').each(function(i){
  jQuery('button', this).click(function(){

    var name = $(this).text();
    var className = $(this).attr("class");
// e.g. "1" or "2"    
console.log(name);
// e.g. "one" or "two"    
console.log(className);    
  });
});

<强> HTML：

<ul>
  <li>
    <button class="one">1</button>
  </li>
  <li>
    <button class="two">2</button>
  </li>
  <li>
    <button class="three">3</button>
  </li>
</ul>

Answer 4

click（）函数只会在加载文档时将自身绑定到DOM中的项目。您需要使用的是jQUery的on()函数。

要使on（）起作用，在这种情况下加载脚本时需要一个存在于DOM中的元素

<ul class="myList">

使用on（）函数，您可以将click事件添加到UL.myList中的选定元素。代码

$('.myList').on('click', 'li > button', function(){...});

将click事件绑定到li内的所有按钮，这些按钮存在于UL.myList中。即使在AJAX调用之后添加了li＆gt;按钮元素，这些也将被绑定

实施例：

(function($) {
  $(document).ready(function() {
    $('#addLi').on('click', function() {
      $(".myList").append($('<li  data-mydata="The new one"><button type="button">btn</button></li>'));
    });

    $('.myList').on('click', 'li > button', function() {
      var thisButton = $(this); //Get the button that was clicked
      var prnt = thisButton.parent(); //Get its parent
      var msg = "I was clicked" + thisButton.prop('tagName') + " My parent is " + prnt.data('mydata'); //Retrieve data of the parent
      alert(msg);
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="myList">
  <li data-mydata="The one">
    <button type="button">btn</button>
  </li>
</ul>

<button type="button" id="addLi">Add LI</button>

jQuery - 将事件绑定到动态生成的列表中的每个元素

4 个答案: