如何使用jQuery手動觸發委託事件？

Question

有沒有辦法用jQuery手動觸發委託事件處理程序？

採取以下示例代碼：

<div class="container"> 
    <input type="button" value="Hello"> 
    <span class="output"></span> 
</div> 
​ 
<script> 
    $('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 
</script> 

（在線：http://jsfiddle.net/TcHBE/）

我期待這會工作，並文本「Hello」將出現在跨度沒有實際點擊的按鈕，但它沒有。

我在處理程序中使用e.delegateTarget，因爲.ouput元素不會與按鈕有一個已知的關係，除了.container中的某個地方。這就是我首先使用委託事件處理程序的原因。

更新：

而且我使用triggerHandler，因爲該事件已在真實代碼，我不希望觸發默認行爲。 （在真實的代碼中，事件是Bootstrap Modal plugin的自定義事件hide，但我實際上並不想在頁面加載時觸發事件處理程序時隱藏模式）。

我可以將處理程序提取到一個命名函數中並直接調用它，但由於使用了e.delegateTarget，這會使得構造更復雜。

Answer 1

您可以手動創建一個Event對象，並相應地設置target屬性來誘使jQuery思考事件冒泡。

var c = $('#container'); 

c.on('click', '[type=button]', function(e) { 
    $(e.delegateTarget).find('span').text($(this).val()); 
}); 

var event = jQuery.Event('click'); 
event.target = c.find('[type=button]')[0]; 

c.trigger(event); 

http://jsfiddle.net/PCLFx/

Answer 2

選擇器在.on()方法是可選的。
當你寫：

$('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 

你告訴事件處理程序只聽容器內的按鈕點擊。
$(e.delegateTarget)只是對外部容器的引用。我已更新your fiddle to echo this。

這是報價from the API:

當提供一個選擇器，該事件處理程序被稱爲 委派。當事件直接發生在綁定元素的 上時，不會調用處理函數，但僅對於 與選擇器匹配的後代（內部元素）。 jQuery將事件從事件目標 中的事件冒泡到處理程序所附的元素（即，最內層到最外層元素 ），併爲匹配選擇器的路徑上的任何元素運行處理程序。