JQuery的：動態地創建事件綁定最好的辦法元素

考慮以下幾點：JQuery的：動態地創建事件綁定最好的辦法元素

var template = '<div class="dynamic">Some markup</div>' 
    , $template = $(template); 
$template.on('click.namespace.data-api', function(e) { doStuff() }); 
$('div.#parent').append($template);

對我來說，這似乎是綁定一個事件到節點的最優化的方式，因爲該事件被連接到一個已經作爲jQuery對象引入的節點。但是，我不確定這是如何在實際點擊事件中發揮作用的;點擊，是jQuery能夠立即找到這個元素，因爲事件綁定到一個jQuery對象？或者是更優化的情況下使用類似綁定：

var template = '<div class="dynamic">Some markup</div>' 
    , $template = $(template); 
$('div.#parent').append($template); 
$('div.#parent').on('click.namespace.data-api', 'div.dynamic', function(e) { doStuff() });

來源

2017-08-31 Chad Casey

我想我不明白你在問什麼，因爲這些代碼片段做不同的事情。首先是創建一個新元素並將其添加到頁面中，而第二個元素不會。這些還將點擊處理程序添加到不同的元素（儘管推測可能具有相同的觀察效果？）。我不清楚你在比較兩者之間的原因或原因。 – David

在這種情況下，jQuery支持通過'.on（）'將綁定點擊事件偵聽器添加到文檔片段（這是您的$ template'），即使它沒有被注入到DOM中：https://github.com/jquery /api.jquery.com/issues/548 – Terry

@大衛，我已經更新了清晰。在第二個示例中，我將處理程序添加到偵聽'div.dynamic'子節點上的點擊的父節點上。 –

JQuery的對象只有在精確的通話，他們都在堅持只要是調用完成不再是與作爲一個jQuery對象的對象。

正如你點擊委派顯示的那樣，你不必擔心在任何時候被創建的元素的動態方面，因爲處理程序被掛鉤到父節點，然後觀察點擊委託元素/類。

使用直接授權方法向我寫入點擊委派的第二版本更容易閱讀，並且在您將來再次閱讀時更加清晰。

來源

2017-08-31 17:59:09

雖然您可能更喜歡vanilla JavaScript，但問題似乎在於詢問jQuery。這個問題的答案其餘部分是不是很清楚。 – David

大衛 - 這是我的錯誤，我讀了第二次使用，就好像使用$（「div＃parent」）。click（「on」，「delegation」）。 –

-1

不是將事件綁定到特定元素，而是可以將其綁定到文檔。

`$('.dynamic').click()` can be replaced with `$(document).on('click', '.dynamic', function())`

來源

2017-08-31 18:01:30

問題中的代碼已經使用事件委託。仔細的觀察者會看到沒有調用'.click（）'函數。 – David

此外，不建議將事件偵聽器附加到'document'，因爲jQuery將不得不將事件與冒泡路徑中的所有元素進行比較，這會顯着降低性能。 – Terry

JQuery的：動態地創建事件綁定最好的辦法元素

回答

相關問題