附加动态内容后，onclick无法正常工作

Question

<div class="demo_restaurant">
<li class="school" onclick="dropdown(this)">
    <span class="icon glyphicon glyphicon-education">
    </span>
     <span id="1" class="school_title item_title">ABC
    </span>
</li>
<li class="school" onclick="dropdown(this)">
    <span class="icon glyphicon glyphicon-education">
    </span>
     <span id="2" class="school_title item_title">WXY
    </span>
</li>
</div>

当有人使用以下代码点击该li时，我试图获取li id值：

  $(".demo_restaurant li span").on("click", function (argument) {
     alert($(this).attr('id'));  
  });

但问题是当我在ajax调用后添加更多li并附加。然后李onclick不起作用。在那个附加元素不能调用那个单击函数，虽然它在HTML中。我怎样才能使它工作？

Answer 1

试试这个：

  $('.demo_restaurant').on('click', 'li span', function(argument) {
     alert($(this).attr('id'));  
  });

说明：

  

当元素动态添加到DOM时，您需要   告诉jQuery监听最近的父母的事件   当你的处理程序绑定时。 （请注意，它也适用于任何其他父级，最多document，但它的优化程度要低得多。）

另一种方法是每次添加一些新内容时将处理程序绑定到添加的DOM。