javascript - 如何将原型(prototype)的切换应用到通过 JSON 加载的内容，仅 IE 问题

Question

我通过原型(prototype)使用 PHP 和 javascript。我有一个已打开的线索评论页面默认情况下，通过 JavaScript 调用通过 JSON 返回的 PHP 文件数据，仅在数据库中检索父注释。 (简而言之，仅从数据库获取并显示父评论)然后父级被加载并格式化为显示在页面上，并带有一个链接来获取和显示其子级评论，链接示例:

<span id="moreparent8351" onclick="insertChildDiv('parent8351')">1 Replies and more</span>

上面的span链接调用javascript函数“insertChildDiv()”，该函数基本上获取parent_id=parent8351的注释，还使用一个PHP文件，该文件通过JSON将数据返回到javascript，动态插入嵌套在其父注释下的子注释。那么上面使用原型(prototype)的span链接就会变成:

<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>

现在问题来了，在 id=childparent8351 的 div 中插入的内容不会仅在 IE v6、v7 和 v8 中响应隐藏/显示切换。其他浏览器工作正常。看起来 IE 无法将隐藏/显示切换应用于动态插入的内容。我尝试将在fogbugz中看到的插入内容硬编码到页面并在IE上再次测试，你猜怎么着？切换有效!

我不想获取父级和子级的所有评论，然后隐藏子级评论，这会浪费资源，因为我们不确定是否重要或用户是否会阅读这些内容。

有解决办法吗？如果没有，那么我希望这篇文章能够帮助其他人在设计阶段完成类似的事情。

Answer 1

Element.toggle() 应该可以很好地处理动态生成的内容。您的问题很可能在于用于生成此内容的方法。

您说:

then the span link above using prototype transforms into:

<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>

您到底如何更改 span 元素的 onclick 属性？

首先，我绝对不建议即时更改 onclick 事件。最好使用一个函数来检查您正在尝试执行的操作的当前状态并执行适当的代码。

请确保不要使用innerHTML“转换”您的span 元素，包括onclick 属性。 DOM 可能仍在尝试引用您刚刚删除的函数。如果要更新您的 onclick 属性，请按如下操作:

var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };

...或者，当您想要原型(prototype)方式时:

var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach  new handler
element.observe('click', function() { // do stuff });