事件处理动态创建的 HTML 的最佳方法是什么？

Question

在处理文档从一开始就包含的项目时，很容易处理事件：

$(document).ready(function() {
    $('.element-in-question').on("event", function (event) {
        //do what you need to do during the event
    });
});

我的问题是我如何最好地处理动态元素。例如，假设我动态加载通知，其中一些是 AJAX 请求期间的好友请求。我会在成功回调中创建事件处理程序，还是在其他地方创建？

我目前的做法是：

$(document).ready(function() {
    $.ajax({
        url: '/friendships/requests',
        type: 'GET', 
        success: function(responseData) {
            //dynamically create your elements (with classes accepted and rejected)
            $('.accepted, .rejected').on("click", function(event) {
                //do what is needed in this event
            });
        }
   });
});

这是惯用的方法，还是我应该采取的另一种方法？

Answer 1

使用 jquery 的 "on" merhod 将事件处理程序绑定到父元素（不会更改），并传递要侦听的元素的选择器：

$('.parent').on('event', '.child', handlerFunction);

Answer 2

如果您动态创建一个元素，例如"按钮"，而该元素以前不在页面上，请按如下方式处理它：

$(function() {
    (function() {
        $('body').append('<button id="newButton">Hello World!</button>');
    })();
    $('body').on('click','#newButton',function() {
        console.log($(this).html()); //"Hello World!"
    });

});

Answer 3

我认为这是（部分）正确的方法。不能也不应该将事件处理程序应用于可能可用或可能不可用的对象，即使可能也是如此。

如果情况涉及 10000 个不同的事件处理程序，则它们应该仅在 dom 中存在时才可用。删除事件处理程序时，也应删除事件处理程序。

你这样做的方式很简陋，但是正确的。

2 其他想法。如果在 ajax 回调中绑定侦听器，则可以添加到事件的"堆栈"中，因为它们不会被替换。不是一件好事。如果 ajax 查询将发生多次，请不要再次添加它（如果未先删除）。

另一个方法可能是将它们添加到所有页面，如果这是一个小页面/应用程序，并首先检查该元素是否存在。这样：

if ($('#id').size() > 0) { 
// bind events for #id here
}