jQuery多事件处理程序和层次结构

我试图在两个不同的地方为同一表单定义两个EventHandler

modalPlaceholder.on('submit', 'form', function(e){
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.ajax({
    // ajax stuff
  });
  e.preventDefault();
})

这是一个通过ajax post发送表单的工具

$('body').on('submit', 'form', function(){
  $(this).find('.hasPlaceholder').each(function() {
    $(this).val('');
  });
})

这个一对零的表单值只是占位符，所以它们不会作为实际值发送到服务器

对于不在modalPlaceholder中的表单，这可以正常工作。但是对于我想用ajax发送的表单，表单会在归零之前被序列化并发送

有没有办法定义调用EventHandler的顺序？

---

非常感谢您的帮助。

您将事件分别委托给您的

modalPlaceHolder

元素和

元素。这意味着事件必须到达这些元素才能被处理

DOM事件总是在文档层次结构中出现气泡。由于您的

modalPlaceHolder

元素是页面

的后代，因此事件冒泡将始终在

元素之前到达该页面。因此，无论第一个处理程序的注册顺序如何，第一个处理程序总是在第二个处理程序之前运行

---

如果可能，将两个事件委托给

元素或您的

modalPlaceHolder

元素，并在第一个处理程序之前注册第二个处理程序：

$('body').on('submit', 'form', function() {
    $(this).find('.hasPlaceholder').val('');
}).on('submit', 'form', function(e) {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    $.ajax({
        // ajax stuff
    });
    e.preventDefault();
});

---

看看这个，可能会有帮助：谢谢你的评论。问题是，从技术上讲，我不会将两个EventHandler都附加到同一个元素。第一个连接到车身，第二个连接到modalPlaceholder。但你的链接可能还是有用的。弗雷德里克·哈米迪（Frédéric Hamidi）知道了。您也可以使用占位符属性而不是JS解决方案，JS解决方案在提交表单之前不需要任何清除。JS解决方案仅适用于不支持占位符属性的浏览器。>如果可能，将这两个事件委托给元素或您的modalPlaceHolder元素，我想我必须以某种方式使之成为可能。谢谢你的洞察力。