AJAX 请求中的 Javascript答案

【问题标题】：Javascript inside AJAX requestAJAX 请求中的 Javascript
【发布时间】：2011-10-07 12:46:40
【问题描述】：

AJAX 函数有点问题：

PAGE A 代表页面。
PAGE X 代表加载的内容。
RES A 代表页面结果。
RES B 代表一些 AJAX 加载的内容 => 新结果。

PAGE A 包含 20 个结果，每个结果都可以删除，并通过 AJAX (PAGE X) 加载新结果。

例子：

用户在第 A 页： --> PAGE A 加载js“点击”功能。 --> 结果为 RES A (20x)。

当用户从 RES A (1x) 中移除一个结果时，AJAX 会加载一个新的结果 RES B (1x)：

用户 - 仍然 - 在 PAGE A 上。 --> PAGE X 加载了 js 的“点击”功能。 --> 结果是 RES B (1x)

为了给 RES B 添加点击功能，我必须重新加载一个更轻的 JS，但这会增加 RES A 的功能。

因此，当用户从 RES A 中删除结果时（删除 5 个结果为 1x5），RES B 结果乘以 5 倍（用户得到相同结果的 5 倍而不是 1 倍）。

你明白了吗？简而言之，AJAX 请求乘以 x RES B 而不是坚持 1 个请求。你知道如何保持我的 RES B 1x 吗？

谢谢！

【问题讨论】：

标签： javascript ajax load request unobtrusive

【解决方案1】：

我认为您每次“重新加载更轻的 JS”时都会重新绑定点击事件。 Javascript 不会取代事件函数——它们只是串联起来的。如果您使用 jQuery，请使用 live 添加点击事件。如果你不 - 在重新加载之前清除当前的点击事件

【讨论】：

【解决方案2】：

似乎事件被多次附加。
使用unbind().click() 或unbind().bind('click') 或die().live() 无论你在使用什么

【讨论】：

太棒了，live() 只是将函数全球化 ^^ 谢谢！
感谢在stackoverflow中用+1表示^^
哦，是的，你的积分还不够。没关系，很高兴你的问题解决了

【解决方案3】：

您的解释真的难以理解，但如果我理解正确，您的问题在于您多次绑定同一个元素。

在您的情况下，最好的解决方案是使用 jQuery .delegate('#datatable a', 'click', function(e){ /* DO STUFF */})，它允许将所有选择器匹配元素绑定一次（在这种情况下，例如，如果您有一个 id=datatable 的表，则其中的每个链接它将始终绑定到该处理程序，即使您向表中添加更多 html 或删除一些），您以后也不必担心它。

但是，如果您不使用 jQuery，唯一的解决方案是在添加事件之前取消绑定事件（以删除已经存在的绑定），然后再次绑定它们。

【讨论】：

大声笑我知道 :( 我使用 jQuery 并且 live 函数刚刚修复了它。
delegate beats live 在性能方面，特别是如果你有更大的表，绑定父元素并找出在代码中点击了什么比绑定每个单元格等效率更高。跨度>

【解决方案4】：

您需要做的是在加载时处理结果 (1x)。一种简单的方法是在加载时将一个类添加到结果中，并在完成后将其删除。

例如

$('.newresult .clickbutton').ready(function(){
   // Do something
});

$('.newresult').removeClass('newresult');

【讨论】：