Javascript 将更多可单击元素添加到页面中，则.on（）不起作用

所以我在一个页面中有一些代码是这样的

<div id="main">
  <div class='module' id ='test1'>1</div> 
  <div class='module' id ='test2'>2</div>
  <div class='module' id ='test3'>3</div>
  <div class='module' id ='test4'>4</div>
</div>

在动态添加一个元素之前，这一切都很好，比如说我添加了一个元素

  <div class='module' id ='test5'>5</div>

这将不可单击，因为.on未绑定到此

我在这里读过一些帖子解释这一点。。。但是我找不到解决办法

---

有人能帮忙吗？

将事件委托给父主节点

试试这个

---

$'body'.onclick、.module、function{

您的JavaScript代码仅在页面加载时执行。因此，在页面加载后，您的代码将被执行，并且您告诉它将onclick事件处理程序附加到具有类模块的元素。在初始页面加载期间，只有4个这样的元素。因此，事件处理程序将仅附加到这些元素事实上

现在，当动态添加新元素时，事件不会触发，因为没有绑定到它们的处理程序

在这种情况下，您应该利用事件委托。您需要将事件处理程序绑定到封闭的元素main或某个use body

因此，您的代码如下所示：

$('#main').on("click", ".module", function(){
  if ($(this).hasClass('flipped')) {
    $(this).toggleClass('flipped');   
  } else {
      $('.module').removeClass('flipped');
      $(this).toggleClass('flipped');
  }  
}); 

因此，事件将仅绑定到静态main，但当事件发生时，它知道在何处查找目标元素，因为您已将目标指定为.module

看看这个：

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on时存在于页面上。若要确保元素存在并且可以被选择，请在文档就绪处理程序中为页面上HTML标记中的元素执行事件绑定。如果新HTML正在注入页面中，选择元素并在将新HTML放入页面后附加事件处理程序。或者，使用委派事件附加事件处理程序，如下所述

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择保证在附加委派事件处理程序时存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。这元素可以是模型-视图-控制器设计中视图的容器元素，例如，如果事件处理程序希望监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他HTML之前在文档的头部可用，因此可以安全地附加事件，而无需等待文档关闭准备好

除了能够处理尚未创建的子元素上的事件外，委派事件的另一个优点是，当必须监视许多元素时，委派事件的开销可能会低得多。在tbody中包含1000行的数据表上，此示例将处理程序附加到1000个元素：

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

委派事件方法仅将事件处理程序附加到一个元素tbody，事件只需要从单击的tr向tbody冒泡一个级别：

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

---

注意：委派事件对SVG不起作用。

sweet..我尝试了类似的移动到main的操作，但我的逻辑略有不同..感谢您将在10年内接受，但我找不到解决方案-真的吗？！这是关于jQuery最常见的问题之一，在jQuery文档中也有很好的记录。可能是我的重复对不起，我确实看了一下，找不到需要的东西。对不起，如果我浪费了大家的时间

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});