如何在页面加载后注册事件处理程序？

Question

我希望我明确提出问题。

假设您有一些复选框（或其他任何类型的元素），您可以在页面加载时为其注册事件处理程序。然后你使用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() {});，但显然它不支持所有浏览器...

有什么建议吗？

Answer 1

您可以将事件委托给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/

Answer 2

对于jQuery 1.4，你可以随时使用live()太http://api.jquery.com/live/允许你现在和未来将处理程序附加到任何匹配元素。

Answer 3

在Jquery中这样做的方式是，创建处理程序时不需要该对象存在。

你可以使用：

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

这将被应用到任何新的复选框添加到页面，不管时机。

Answer 4

我会建议不要使用，因为these reasons

不久总结了现场选择，这是一个性能问题，因为它与每一个点击事件打乱。

所以，应该使用委托像的投入最低共同父元素（最有可能的一种形式）对在岗描述：

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

你可以找到a jsfiddle here

不要使用选择像input.class_name（除非有输入的类名以外的元素）。它们比.class_name慢，因为它们循环搜索表单中的所有输入，而不是按类选择元素。