Question

我有一个div然后在其中动态生成几个div，所以它看起来像这样生成的东西：

<div class="info">
  <div class="other"></div>
  <div class="items">
    <li></li>
    <li></li>
  </div>
</div>

我在.append上使用$(".info")来插入div和li（在其中一个中）。我的问题是让李可点击。由于它们是动态生成的（以及它们的父$(".items")），因此不起作用：

$(".items").on('click', 'li', function() {
  console.log("val"); 
});

编辑：嘿，我把div改为ul，所以生成了：

<div class="info">
  <div class="other"></div>
  <ul class="items">
    <li></li>
    <li></li>
  </div>
</div>

然而，我以前的js仍然不起作用。现在尝试所有建议！谢谢！

Answer 1

您必须将事件委派置于.info，body或document，因为您甚至会动态生成.items。 li仅在ul内有效。

$(".info").on('click', '.items li', function(e) {
    console.log("val"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <div class="other"></div>
  <ul class="items">
    <li>one</li>
    <li>two</li>
  </ul>
</div>

Answer 2

我已经用工作示例对其进行了编辑。

$(document).on('click', 'li', function(e) {
    console.log("val"); 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="info">
  <div class="other"></div>
  <ul class="items">
    <li>one</li>
    <li>two</li>
  </ul>
</div>

Answer 3

在范围内使用this来访问点击的元素。

＆＃13;

$(".items").on('click', 'li', function() {
  alert("You clicked on '#" + this.innerHTML + "'");
  console.log(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  <div class="other"></div>
  <div class="items">
    <li>1</li>
    <li>2</li>
  </div>
</div>

＆＃13;

Answer 4

$('body').on('click', '.items li', function(e){})

应该有效。这会将事件委托给正文，这意味着即使是尚未发生的事件也会起作用。

var container = $('.container');
var child = $('<div />').addClass('child').text('Click me');
child.appendTo(container);

$('body').on('click', '.child', function(e){
    alert('It works ;)');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

从动态生成的div调用li

4 个答案: