Javascript 和 JQuery 新手：为什么我的 AJAX 锚点只能工作一次？答案

【问题标题】：New to Javascript & JQuery: Why will my AJAX anchors work only once?Javascript 和 JQuery 新手：为什么我的 AJAX 锚点只能工作一次？
【发布时间】：2011-04-15 02:41:06
【问题描述】：

我有 C、C++ 和 Java 编程背景，现在正在为我正在从事的个人项目使用 Javascript 和 JQuery。

我已经为我的项目创建了主页，该主页应该是“登录/创建帐户/发送密码重置代码/重新发送激活码”页面。感兴趣的元素是：

包含当前表单的 div
一个 div 包含其他表单的锚点
一个包含前两个 div 的 div

页面最初以登录表单及其关联的锚 div 开始。单击锚 div 中的锚之一（例如“创建帐户”锚），调用 JQuery replaceWith() 方法将当前表单 div 和锚 div 替换为请求的表单 div 及其关联的锚 div。

代码有效...但每次单击锚点时只有一次。为什么是这样？我在使用 JQuery 元素之前将它们放在变量中，因此即使它们已从 DOM 中“删除”，它们仍然可用，或者我是这么认为的。谁能帮忙解释一下？

这里是代码（“.formAndLinksDivs”是给所有包含表单和锚 div 的 div 的类，“#content”是包含这些类型的 div 的页面的主 div）：

var varCreateAccountFormAndLinksDiv;
var varLoginFormAndLinksDiv;
var varSendAnotherActivationCodeFormAndLinksDiv;
var varSendResetCodeFormAndLinksDiv;

$(function() {

    varCreateAccountFormAndLinksDiv = $("#createAccountFormAndLinksDiv");
    varLoginFormAndLinksDiv = $("#loginFormAndLinksDiv");
    varSendAnotherActivationCodeFormAndLinksDiv = $('#sendAnotherActivationCodeFormAndLinksDiv');
    varSendResetCodeFormAndLinksDiv = $('#sendResetCodeFormAndLinksDiv');

    $(".ajaxLinkCreateAccount").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varCreateAccountFormAndLinksDiv);
        $(varCreateAccountFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkLogin").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varLoginFormAndLinksDiv);
        $(varLoginFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkSendAnotherActivationCode").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varSendAnotherActivationCodeFormAndLinksDiv);
        $(varSendAnotherActivationCodeFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkSendResetCode").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varSendResetCodeFormAndLinksDiv);
        $(varSendResetCodeFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });
});

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

.click() 在 DOM 加载时注册。 .live('click', ...) 绑定到任意元素，这是您在使用 jQuery 创建元素并将事件附加到它们时所需要的。

所以我会更改这些类型的函数定义：

$(".ajaxLinkSendResetCode").click(function()

进入这些：

$(".ajaxLinkSendResetCode").live('click', function()

【讨论】：

嗯，click 是bind('click' 的快捷方式。你的例子是相同的。你的意思是live？

【解决方案2】：

如果您将附加处理程序的元素替换为新元素，则基本事件处理程序附加方法会在其元素被替换时“覆盖”。为了解决这个问题，请使用live() 附加事件。这将确保处理程序适用于与您的选择器匹配的任何元素，即使添加/删除元素也是如此。

【讨论】：

【解决方案3】：

click 事件绑定到您删除的对象，而不是新对象。

看看 Live 处理程序，而不是使用 .click() 绑定。

【讨论】：