jQuery没有检测到附加项[重复]

ffdz8vbo 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(116)

此问题已在此处有答案：

Event binding on dynamically created elements?（23个回答）
13天前关闭
我在一个jQuery web项目上工作了一段时间，遇到了这个bug：
index.html

<body>
  <div id="target">
    <h1>Will be called</h1>
  </div>
  <button>Add h1</button>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</body>

index.js

$(document).ready(function() {
  $("button").click(function() {
    $("#target").append(`<h1>` + "Will not be called" + `</h1>`);
  });
});

$("#target h1").click(function() {
  alert("clicked");
})

现在的问题是，如果一个元素被追加，它将不会被JQuery计数，即使它被显式地写出来这样做。
如果您单击硬写的h1，将出现一个警告，但如果您单击附加的一个，这将不会发生。在我的项目中，我需要这两个元素以相同的方式行事，无论它们是否被追加。

jquery

来源：https://stackoverflow.com/questions/77223922/jquery-not-detecting-appended-items

1条答案

按热度按时间

gkl3eglg1#

将事件委托给确实存在的父元素。例如：单击#target，如果event.target是h1，则调用该函数。

$("#target").on("click", "h1", function() {
      alert("clicked");
    })

演示：

$(document).ready(function() {
  $("button").click(function() {
    $("#target").append(`<h1>` + "Will also be called" + `</h1>`);
  });
});

//use event delegation
//parent on click of child...
$("#target").on("click", "h1", function() {
  alert("clicked");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="target">
    <h1>Will be called</h1>
  </div>
  <button>Add h1</button>

赞(0）回复(0）举报 2023-10-17

我来回答

jQuery没有检测到附加项[重复]

1条答案

相关问题

热门标签

最新问答