Question

我的页面有两个依赖于Javascript的组件。在左侧，有一个属性基础导航（abn）。右边是abn的结果。

abn有一个事件处理程序，结果有一个事件处理程序（两者都是点击）每当用户点击abn时，我都会执行一个ajax调用，该调用返回一个json对象，其中html结果是一个键/值对的值。 html正被插入到结果组件中。

页面结果的事件处理程序在页面刷新时工作正常。当我在ajax调用后将html内容插入结果槽时，它停止工作。我已经验证结果具有我的javascript所依赖的所有div和类。

我认为当我替换html内容时，javascript处理程序就会停止工作。有人可以解释为什么会发生这种情况以及如何解决这个问题吗？

Answer 1

您是否插入了具有相同ID（重复ID）的元素？

Answer 2

你是如何替换结果的html内容的？我的猜测是你在页面加载时定义了事件处理程序，但是你用一个没有事件处理程序的新dom元素覆盖了dom元素。但在我了解更多信息之前，我必须先看一些代码或获得更多解释： - ）

Answer 3

当您使用新数据更新HTML时，您是否重新附加了之前使用过的任何事件处理程序？

你可能已经替换了之前有事件处理程序的元素，现在却没有。

Answer 4

他们是阶级，而不是div。他们有同一个班级。事件处理程序不是结果的一部分。 javascript位于页面底部，而Result位于顶部。所以javascript就在那里。它们没有被替换。

Answer 5

我已经看到了类似的行为，即使用之前设置的innerHTML zaps事件处理程序来操纵DOM，尽管只有当你替换了附加了处理程序的实际元素时。这适用于内联事件处理程序属性，以及通过Javascript连接的“正确”事件处理程序。

测试是否发生这种情况的最佳方法是向单击abn时调用的函数添加一些调试语句。如果您没有使用调试器，只需添加一些警报（然后查看使用JavaScript调试器）

function iAmCalledWhenSomeoneClicksOnAbn(){
    alert("I was called, w00t!");
    //...rest of function
}

第一次点击（有效）会给你一个提醒。如果第二次单击（不起作用）会跳过警报，则表示您的DOM操作正在删除事件处理程序。

如果第二次点击仍然提供警报，则会发生其他事情。最可能的罪魁祸首是一个未处理的Javascript异常，它正在停止执行。下载适用于您的浏览器的调试器（Firefox / Firebug，IE / Visual Studio Express Web开发人员，Safari / Drosera）并遵循执行路径，直到抛出异常，或者您到达应该进行DOM操作的代码部分。如果你到达后者，检查所有变量的内容，以及DOM的当前内容，以确定为什么没有发生预期的DOM操作。

Answer 6

他们是阶级，而不是div。他们有同一个班级。事件处理程序不是结果的一部分。 javascript位于页面底部，而Result位于顶部。所以javascript就在那里。它们没有被替换。

如果要通过.innerHTML用新元素替换元素，那么当您执行此操作时，页面底部的JavaScript将不会被重新执行。如果要使用JavaScript（级别2）而不是html属性（级别0）添加事件处理程序，则仅在用户首次访问页面时添加这些处理程序。每次在页面上放置新的DOM元素时都需要调用该代码。

当然，这个答案可能完全不合适。我们可以判断您是否向我们提供了代码示例。

dom操作后Javascript无效

6 个答案: