Javascript和JQuery的新功能：为什么我的AJAX锚仅能工作一次？

问题描述

| 我来自C，C ++和Java编程背景，现在我正在为自己正在从事的个人项目而使用Javascript和JQuery涉猎。 我已经为我的项目创建了主页，该主页应该是“登录/创建帐户/发送密码重置代码/重新发送激活代码”页面。感兴趣的元素是： 包含当前表格的div 包含其他表格锚点的div 包含前两个div的div 该页面最初以登录表单及其关联的锚点div开始。单击锚点div中的锚点之一（例如\“ create account \”锚点），调用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\',distance: $(this).height()});
    });

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

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

    

解决方法

DOM加载时注册“ 1”。 “ 2”绑定到任意元素，这是在使用jQuery创建元素并将事件附加到它们时所需要的。 因此，我将更改以下类型的函数定义：

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

入这些：

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

    ,如果要附加处理程序的元素被新元素替换，则基本事件处理程序的附加方法在替换其元素时会被“覆盖”。为了解决这个问题，请使用live（）附加事件。这将确保处理程序适用于与选择器匹配的任何元素，即使添加/删除了元素也是如此。     ,click事件绑定到您删除的对象，而不绑定到新对象。 看一下Live处理程序，而不是使用.click（）绑定。