Question

我正在尝试在两个不同的地方为同一个表单定义两个事件处理程序。

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

这个通过ajax发送表格。

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

这一到零的形式只是占位符的值，因此它们不会作为实际值发送到服务器。

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

有没有办法定义调用事件处理程序的顺序？非常感谢。

Answer 1

您分别将事件委派给modalPlaceHolder元素和<body>元素。这意味着事件必须到达这些元素才能被处理。

DOM事件总是冒出文档层次结构。由于您的modalPlaceHolder元素是网页<body>的后代，因此事件冒泡将始终在<body>元素之前到达。因此，无论注册顺序如何，您的第一个处理程序始终在第二个处理程序之前运行。

如果可能的话，将两个事件委托给<body>元素或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();
});

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

1 个答案: