如何在頁面加載後註冊事件處理程序？

假設您有一些複選框（或其他任何類型的元素），您可以在頁面加載時爲其註冊事件處理程序。然後你使用AJAX添加更多的複選框（所以沒有頁面重新加載）。但是您還希望這些新添加的複選框（在頁面加載後）具有相同的註冊事件處理程序？

我想什麼，但我覺得必須有一個更好的方法：

$(document).ready(function() { 

    // Register custom envets handler 
    registerCustomEventHandlers(); 

    $('a').on('click', addExtraFields); 
}); 

function registerCustomEventHandlers() { 
    $('input.class_name').on("change", sayHelloWorld); 
} 

function sayHelloWorld() { 
    alert('Hello world'); 
} 

function addExtraFields() { 
    // insert some checkboxes... 

    // register the events handler again for the newly added fields 
    registerCustomEventHandlers(); 
}

所以基本上是再次增加了相應的複選框我註冊的所有事件處理函數內部。我正在看像這樣的$(document).change(function() {});，但顯然它不支持所有瀏覽器...

有什麼建議嗎？

來源

2012-07-10 Max

您可以將事件委託給document，以便將它們應用於所有將來的輸入。你甚至都不需要把它放在一個domReady事件，因爲document始終可用：

$(document).on("change", "input.class_name", sayHelloWorld); 

function sayHelloWorld() { 
    alert('Hello world'); 
} 

function addExtraFields() { 
    // insert some checkboxes, they will have the same handler attached when inserted 
}

演示：http://jsfiddle.net/gdX3R/1/

來源

2012-07-10 12:12:13 David

感謝您的現場示例。這正是我所需要的，併爲後來的投票而感到抱歉:) – Max 2012-09-03 09:13:03

對於jQuery 1.4，你可以隨時使用live()太http://api.jquery.com/live/允許你現在和未來將處理程序附加到任何匹配元素。

來源

2012-07-10 12:12:45

在Jquery中這樣做的方式是，創建處理程序時不需要該對象存在。

你可以使用：

$(document.body).on("click", "input[type='checkbox']", 
    function(){alert($(this))} 
);

這將被應用到任何新的複選框添加到頁面，不管時機。

來源

2012-07-10 12:13:19

我會建議不要使用，因爲these reasons

不久總結了現場選擇，這是一個性能問題，因爲它與每一個點擊事件打亂。

所以，應該使用委託像的投入最低共同父元素（最有可能的一種形式）對在崗描述：

$('#yourFormId').delegate('.class_name', 'click', function() { 
    // what you want to do 
});

你可以找到a jsfiddle here

不要使用選擇像input.class_name（除非有輸入的類名以外的元素）。它們比.class_name慢，因爲它們循環搜索表單中的所有輸入，而不是按類選擇元素。

來源

2012-07-10 12:33:11

我只能選擇一個最佳答案，但我也喜歡這個解決方案。所以，從我+1。謝謝。 – Max 2012-09-03 09:13:57

如何在頁面加載後註冊事件處理程序？

回答

相關問題