如何解决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()绑定。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。