jquery - 如何将 "on"添加到动态添加的另一个元素内的元素？

Question

我有一个 DOM 元素#article，我正在使用以下方法加载登录表单: 以下代码:

$('#loginLink')
.click(function () {
   var $link = $(this);
   var href = $link.attr('data-href');
   $('#article').load(href);
}
return false;
});

登录表单如下所示:

<article id="article">
<section class="form" id="loginForm">
<form action="/User/Account/Login" method="post" novalidate="novalidate">
.....

如何在表单提交中附加一些操作？目前我有这个 代码:

$("loginForm").on("submit", function () {
   var $form = $(this);

我知道这不会起作用，因为稍后会添加登录表单。我需要的是一种方法 单击登录表单提交时附加到#article。

Answer 1

load有一个回调，一旦内容加载就会触发，所以:

$('#article').load(href, function() {
    // Hook up the new elements here
});

What I need is a way to attach to #article when the loginForm submit is clicked.

因此，在 load 回调中，您可以将 submit 挂接到表单上，并且在事件处理程序中，您可以对 执行任何您想要执行的操作#文章，例如:

$('#article').load(href, function() {
    $("#loginForm").on("submit", function() {
        // Code here to do further things with #article
    });
});

(当然，除非表单有一个打开新窗口的target，或者您取消标准表单提交并以其他方式发送数据，否则页面将被表单完全撕毁提交并被服务器的结果页面替换，因此您对 #article 所做的更改不会持续很长时间。但我猜您正在阻止这种情况，或者您所做的更改制作意味着只有在页面被表单提交破坏为止。)

<小时/>

旁注:这可能只是问题中的一个拼写错误，但您有 $("loginForm") 而不是 $("#loginForm")。