Question

在处理文件来自get go的项目时，事件处理非常容易：

$(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

如果您动态创建一个元素，例如之前未在页面上的“按钮”，请按以下方式处理：

$(function() {

    (function() {
        $('body').append('<button id="newButton">Hello World!</button>');
    })();

    $('body').on('click','#newButton',function() {

        console.log($(this).html()); //"Hello World!"

    });


});

Answer 2

使用jquery“on”方法将事件处理程序绑定到父元素（不会更改）并传递要监听的元素的选择器：

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

Answer 3

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

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

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

另外2个想法。如果在ajax回调中绑定侦听器，则可能会添加到事件的“堆栈”，因为它们不会被替换。不是一件好事。如果ajax查询多次发生，请不要再次添加，如果不是先删除它。

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

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

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

3 个答案: