Question

我试图在点击时以编程方式添加li data-val，如下所示：

$(function () {
  $("#bpadd").click(function () {
      var bpinput = document.getElementById("bpinput").value;
      $('#bpitem').append('<li data-val="' + bpinput + '  clicked">' + bpinput + '</li>');
  });

  $('#bpitem li').click(function () {
    alert($(this).attr('data-val'));
  });

这是html样本：

<input type="text" id="bpinput">
<input type="button" id="bpadd" value="+">    
<ul id="bpitem">
    <li data-val="Test 1 clicked">Test 1</li>
</ul>

如果我点击Test 1，它会有效，但是当我点击一个新项目时没有任何反应，为什么会这样？

Answer 1

试试这个：

$('#bpitem').on('click', 'li', function () {
    alert($(this).attr('data-val'));
});

.click()方法仅将点击处理程序绑定到代码行运行时存在的元素。如果使用.on()，则将处理程序绑定到父#bpitem元素（最初存在），但是当发生单击时，jQuery会检查单击的子元素是否与第二个参数中的选择器匹配，因此它可以正常工作关于动态添加的#bpitem个孩子。

Answer 2

您需要在某个选择器上使用.on ^doc函数，该选择器适用于每个新添加的元素，如下所示：

$('#bpitem').on('click', 'li', function () {
  alert($(this).attr('data-val'));
});

正如您在文档中看到的那样，该函数将绑定与选择器匹配的新添加元素上的事件，而不是仅将其绑定到像.click函数那样的现有元素。

Answer 3

尝试：

$('#bpitem').on('click', 'li', function() {
    alert('clicked');
);

这会动态地将事件监听器添加到所有bpitem li元素，而不是第一次运行时的那些元素

以编程方式添加<li> </li>获取数据值

3 个答案: