Question

请参阅以下代码：

<script>
  $(document).ready(function() {
     $("#btn").click(function() {
        alert("Hello");
     );

     $("a").click(function() {
        addButton();
     });
  });

  function addButton() {
     var par = document.getElementById("#div1");
     var bElem = document.createElement("button");
     var id = document.createAttribute("id");
     id.value = "btn";
     bElem.setAttributeNode(id);
     parent.appendChild(bElem);
  }
</script>

所以我要做的是在运行时创建一个按钮，然后为其添加一个id属性。但是，当我使用$("#btn").click(function()时，它不起作用。当我不在运行时创建按钮时，我可以很好地执行该功能。我该怎么做？

其他信息：我创建的按钮位于div内。

Answer 1

你应该使用event delegation

$(document).on("click","#btn",function(){

});

事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

将#id选择器尽可能靠近元素（在本例中为#btn）并且不会动态加载，这被认为是一种好习惯。想一想#container或#formWrapper 原因是事件冒泡。一个事件一直冒泡起始选择器（document是根元素）。如果添加一个更窄的父元素，它将不那么密集。

修改

$(document).ready(function () { $("a").click(function (e) { e.preventDefault(); addButton(); }); }); $("#div1").on("click", "#btn", function () { alert(1); }); function addButton() { $("#div1").append($("<input/>", { type: "button", id: "btn" })); }

将事件添加到在运行时创建的按钮

1 个答案: