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

我想在两个不同的地方为同一个窗体定义两个事件处理程序。jQuery多个事件处理程序和层次结构

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发送的表单，表单在发生调零之前会被序列化并发送。

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

来源

2012-02-21 Tilman Köster

看一看这一点，它可能会帮助： http://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-t – Bogdan 2012-02-21 13:07:28

感谢您的评论。问题是，从技术上讲，我不会将两个事件处理程序都附加到同一个元素上。第一个附加到body，第二个附加到modalPlaceholder。但是你的链接可能仍然有用。 – 2012-02-21 13:20:28

FrédéricHamidi明白了。你也可以使用占位符属性来代替你的JS解决方案，它在表单提交之前不需要任何清除。 – powerbuoy 2012-02-21 13:37:02

您正在将事件分别委托给您的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(); 
});

来源

2012-02-21 13:29:24

>如果可能的话，将这两个事件都委托给元素或您的modalPlaceHolder元素我想我必须以某种方式使它成为可能。感谢您的洞察力。 – 2012-02-21 13:50:17

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

回答

相关问题