代码之家 › 专栏 › 技术社区 › Vianne

jQuery-从生成的元素动态获取id[重复]

jquery javascript

Vianne · 技术社区 · 6 年前

我试图做的是在单击时获取列表中新添加项目的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

4 回复 | 直到 6 年前

Ankit Agarwal 6 年前

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

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

});

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

BugHunter 6 年前

要获取新创建项的id,请使用ele:first-CSS属性。在单击时调用它。

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

Saeed 6 年前

每次添加新项目时更新您的侦听器,请尝试

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

});

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

user3551009 6 年前

试试这个

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前