Question

HTML代码：

<ul class="nav" id="side-menu">
<li><a href="#" id="add1">录入1</a></li>
<li><a href="#" id="add2">录入2</a></li>
<li><a href="#" id="add3">录入3</a></li>
</ul>

<button type="button" class="addinfobtn" id="addRoomInfo">addinfo1</button>

JS代码：

$("#side-menu a").click(function(){
 switch($(this).attr("id")){
   case "add1":
     $(".addinfobtn").text("addinfo1").attr("id", "addRoomInfo");
     break;
   case "add2":
     $(".addinfobtn").text("addinfo2").attr("id", "addServiceInfo");
     break;
   case "add3":
     $(".addinfobtn").text("addinfo3").attr("id", "addMenuInfo");
     break;
 }

$("#addRoomInfo").click(function(){
  console.log($(this).attr("id"));
});

结果：我更改了.addinfobtn id，但是当我单击按钮时，单击功能运行，并控制已经更改的ID。为什么呢？

Answer 1

选择器用于注册事件，仅在事件注册时使用，而不是在事件被触发时使用。

要避免此问题，请使用附加到动态元素的不变祖先的委托事件处理程序。

e.g。

$(document).on("click", "#addRoomInfo", function(){
  console.log($(this).attr("id"));
});

这会在点击时评估过滤器，而不是在事件被注册时评估，因此对于任何动态更改的选择器来说都是一种有用的技术。

如果没有更接近或更方便的话，文档是默认的，但是不要将body用于委托事件，因为它有样式的错误，这意味着鼠标事件可能不会触发。

更改元素的文本和ID似乎有点不寻常。您可能最好不要创作所有元素，只需隐藏并根据需要显示它们。这简化了维护。

Answer 2

click处理程序立即绑定到DOM节点。每次点击都不会评估选择器。

因此，选择器找到匹配的所有元素，然后绑定这些元素上的单击处理程序。选择器永远不会再使用。

为什么要更改html元素的id，使用旧id的click绑定也会运行

2 个答案: