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多個事件處理程序和層次結構

回答

相關問題