jQuery

Question

我有几个 li 元素被动态添加到 ul 列表中。在每个 li 元素中，都有一个按钮。我想为每个按钮附加一个点击事件，并且在事件处理程序中，我想获得按钮被点击的 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

我会推荐类似的东西

$('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 2

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 3

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

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

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

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

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

Answer 4

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

要使 on() 正常工作，在本例中

加载脚本时，您需要一个存在于 DOM 中的元素

<ul class="myList">

使用 on() 函数，您可以将点击事件添加到 UL.myList 中的选定元素。代码

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

会将 click 事件绑定到 li 中的所有按钮，这些按钮存在于您的 UL.myList 中。即使在 AJAX 调用

之后添加了 li>button 元素，它们也会被绑定

示例：

(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 - 将事件绑定到动态生成的列表中的每个元素

jQuery - bind an event to each element in a dynamically generated list

each

bind

dynamic