Question

我遇到了问题 - 我使用jQuery Ajax在页面上放了一段html代码

示例代码：

<ul id="income">
<li id="1"><p>a1</p></li>
<li id="2"><p>a2</p></li>
<li id="3"><p>a3</p></li>
</ul>

我想知道用户点击了哪个元素（id）。不幸的是，以下代码不起作用：（

$('li').click(function(){
   var info = $(this).attr('id');
   alert(info);
});

在我看来，问题源于使用ajax提供html。 jQuery看不到它？

Answer 1

您的JavaScript代码段可以读作＆＃34;查找所有列表项，并将事件监听器附加到每个＆＃34;。在脚本运行时，不在DOM中的任何列表项都不会附加事件监听器。

这可以通过将事件监听器通过委托附加到DOM中的元素来实现（单击列表项上的事件会使父母冒泡）

请改为尝试：

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

Answer 2

您可以使用以下两种方法之一：

首先：

＆＃13;

$(document).on('click', 'li', function(){
  var info = $(this).attr('id');
  console.log(info);// or use alert
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="income">
  <li id="1"><p>a1</p></li>
  <li id="2"><p>a2</p></li>
  <li id="3"><p>a3</p></li>
</ul>

＆＃13;

第二:(在这种情况下使用索引，如果你的列表元素变得太重，你就不能为它们设置数量。）

＆＃13;

$(document).on('click', 'li', function(){
  var info = $(this).index();
      info = info  + 1; // because index in JS is 0 base
  console.log($id);// or use alert
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="income">
  <li id="1"><p>a1</p></li>
  <li id="2"><p>a2</p></li>
  <li id="3"><p>a3</p></li>
</ul>

＆＃13;

如何检查使用JQuery单击了哪个元素<li>？

2 个答案: