代码之家 › 专栏 › 技术社区 › 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);
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前