首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

函数在追加li子代后停止工作(按钮)

函数在追加li子代后停止工作是因为在追加子代后,新添加的li元素没有绑定相应的事件处理程序。要解决这个问题,可以通过以下步骤:

  1. 确保在追加li子代后重新绑定相应的事件处理程序。例如,如果按钮的点击事件是触发函数的关键,那么在追加li子代后,应重新为按钮添加点击事件的处理程序。
  2. 通过事件委托的方式绑定事件处理程序。事件委托是一种将事件处理程序绑定到父元素上,以便处理后代元素事件的方法。这样即使追加了新的li子代,事件处理程序仍然有效。例如,可以将事件绑定到父元素ul上,然后通过事件冒泡的方式捕获触发事件的子元素li。

下面是一个示例代码来解决这个问题:

HTML:

代码语言:txt
复制
<button id="add-btn">追加li子代</button>
<ul id="list">
  <li>第一个li子代</li>
  <li>第二个li子代</li>
  <li>第三个li子代</li>
</ul>

JavaScript:

代码语言:txt
复制
// 获取按钮和ul元素
var addButton = document.getElementById("add-btn");
var list = document.getElementById("list");

// 绑定按钮点击事件处理程序
addButton.addEventListener("click", function() {
  // 创建新的li元素
  var newLi = document.createElement("li");
  newLi.textContent = "新添加的li子代";
  
  // 将新的li元素追加到ul中
  list.appendChild(newLi);
  
  // 绑定新添加的li元素的事件处理程序
  newLi.addEventListener("click", function() {
    console.log("点击了新添加的li子代");
  });
});

在上面的代码中,通过addEventListener方法为按钮添加了一个点击事件处理程序。当按钮被点击时,会创建一个新的li元素,并将其追加到ul中。同时,为新添加的li元素也绑定了一个点击事件处理程序。这样无论是原来存在的li元素还是新添加的li元素,点击时都会输出相应的消息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券