Question

我要做的是点击列表中的新添加项目的ID名称。这是我的代码。

$(document).ready(function() {

  $('ul>li').on('click', function() {
    var idName = $(this).attr('id');
    alert(idName);
  });

  $('#add').click(function() {
    var n = Math.floor((Math.random() * 100) + 1);
    $('ul').prepend('<li id="name-' + n + '">New Item</li>');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="name-88">Old Item</li>
  <li id="name-59">Old Item</li>
  <li id="name-48">Old Item</li>
</ul>
<button id="add">Add Item</button>

JSFiddle

Answer 1

您需要使用$(document).on('click', 'ul>li', function(){});而不是$('ul>li').on('click', function() { });这是因为您在加载jquery代码后动态添加元素。因此，$('ul>li').on('click', function() { });将不会在新添加的元素上检测到click事件。要解决此问题，您需要在ul>li级别将点击事件分配到document，以便每当添加新元素时，它都位于document的上下文中并侦听click ul>li上的事件

＆＃13;

$(document).ready(function() {

  $(document).on('click', 'ul>li', function() {  
    var idName = $(this).attr('id');
    alert(idName);
  });

  $('#add').click(function() {
    var n = Math.floor((Math.random() * 100) + 1);
    $('ul').prepend('<li id="name-' + n + '">New Item</li>');
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="name-__">New Item</li>
  <li id="name-88">Old Item</li>
  <li id="name-59">Old Item</li>
  <li id="name-48">Old Item</li>
</ul>
<button id="add">Add Item</button>

＆＃13;

Answer 2

要获取新创建项目的ID，请使用ele：first CSS属性。点击方法调用它。

let new_el_id = $("ul").find("li:first").attr("id");

Answer 3

每次添加新项目时都会更新您的监听器，请尝试

＆＃13;

$(document).ready(function() {
  addListener();

  function addListener() {
    $('ul li').on('click', function() {
      var idName = $(this).attr('id');
      alert(idName);
    });
  }

  $('#add').click(function() {
    var n = Math.floor((Math.random() * 100) + 1);
    $('ul').prepend('<li id="name-' + n + '">New Item</li>');
    addListener();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  //
  <li id="name-__">New Item</li>
  <li id="name-88">Old Item</li>
  <li id="name-59">Old Item</li>
  <li id="name-48">Old Item</li>
</ul>
<button id="add">Add Item</button>

＆＃13;

Answer 4

试试这个

$('ul').on('click','li', function() {  
    var idName = $(this).attr('id');
    alert(idName);
});

jQuery - 从生成的元素动态获取id

4 个答案: