Question

我有一个带有元素<div id="x">的触摸屏页面，其中包含以下形式的几个子元素：

<div id="x_1" style="certain_class" pid="1723464"></div>
<div id="x_2" style="certain_class" pid="1723465"></div>
<div id="x_3" style="certain_class" pid="1723466"></div>
<div id="x_4" style="certain_class" pid="1723467"></div>

这些元素在它们上面设置了jQuery touchstart绑定事件......现在，如果我使用以下命令更改这些子元素：

$("#x").html("<div id="x_1"></div><div id="x_2"></div><div id="x_3"></div><div id="x_4"></div>");

将这些子元素更改为：

<div id="x_1"></div>
<div id="x_2"></div>
<div id="x_3"></div>
<div id="x_4"></div>

为什么我似乎失去了对这些元素设置的touchstart绑定？是因为我将父元素中的子元素渲染为null和void，从而渲染了绑定事件？

我是否应该通过父节点中的各个子元素逐位更改这些元素的额外参数，而不是在父节点上使用.html()方法？

非常感谢任何帮助...

Answer 1

您几乎要删除现有元素（及其绑定），并创建具有相同ID（但没有绑定）的新元素。一种解决方案是使用jQuery.fn.on来绑定事件。这样，绑定将成为x的一部分。

$('#x').on('touchstart', '#x_1, #x_2, #x3, #x4', yourFunction)

Answer 2

当您使用.html() jQuery方法替换子元素时，那些绑定了它们的事件处理程序的旧DOM元素将被完全删除，不再在DOM中。因此，那些元素上的事件处理程序就会消失。

您有几种选择：

停止更换元素。相反，只需修改它们，以便相同的元素保留在页面中，从而使它们的事件处理程序保持不变。
在设置.html()以向新元素安装新事件处理程序后重新附加事件处理程序。
使用附加到未销毁/重新创建的父对象的委托事件处理。

我的第一选择是在可行的情况下停止更换元素。我不确切地知道你要做什么样的改变，所以我不知道这会有多么简单。

通常，委派事件处理是最优雅的解决方案。您将一个事件处理程序附加到父级，即使您销毁并重新创建子级，它也将保持有效。在这种情况下，这是一种方法：

$("#x").on("touchstart", "[id^='x_']", function(e) {
    // event handler code here
    // the this pointer will point to the origional DOM object that caused the event
});

这会将委托事件处理程序附加到#x对象，并且该事件处理程序会在id属性以＆＃34; x _＆＃34;。<开始的任何子对象上发生touchstart事件时触发。 / p>

以下是有关委派事件处理的一些其他参考：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

更改DOM元素是否会影响绑定的子元素？

2 个答案: