javascript - jQuery 表单处理，如何在回调上重新分配函数？

Question

 $(function(){

$(".mailbutton").click(function() {
  var email = $(".mailingfield").val();
  $.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
        var content = $(data).find("#mailinglistform");
        $("#box").empty().append(content);
  });
 });
});

我用它来处理电子邮件地址。如果 PHP 脚本失败，表单将在“.mailinglistform”中发回，并带有新表单和一些解释错误的文本。我遇到的问题是，即使按钮在回调表单中具有“.mailbutton”类，该按钮在单击时不会执行任何操作。

这是因为 jQuery 仅在第一次时识别它吗？如果是这样，有没有办法在回调时“重新加载”“mailbutton”.click 函数？

谢谢!

Answer 1

你是对的，因为你只重新渲染页面的一部分，所以你之前编写的 jQuery 不会注册到你重新渲染的"new"mailbutton 类中。要解决这个问题，您应该使用 .on() ，例如:

$(".wrapper").on('click', '.mailbutton', function() {
  var email = $(".mailingfield").val();
  $.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
        var content = $(data).find("#mailinglistform");
        $("#box").empty().append(content);
  });
 });

在这种情况下，包装器需要是页面重新渲染部分之外的类元素(例如“内容”类，可能是表单周围的类等)，并且是一个持续存在的元素(即不在 ajax 调用中重新渲染)。这会将 onclick 处理程序附加到作为包装类子级的任何 .mailbutton 类，无论它们是在呈现页面时出现的，还是稍后添加到 DOM 中的。