jquery - 无法为动态创建的元素调用函数答案

【问题标题】：jquery - unable to invoke function for dynamically created elementsjquery - 无法为动态创建的元素调用函数
【发布时间】：2018-01-17 13:44:13
【问题描述】：

我有一个分页ajax函数如下所示：

$.fn.ajaxPagination = function() {

    return this.unbind('click').on('click', function(e) {

        e.preventDefault();
        //alert();return;

        if (!$(this).parent().hasClass('disabled')) {

            var href = $(this).attr('href');
            var wrapper = $(this).closest('.content-wrapper');

            wrapper.addClass('loader-bg');


            $.post(href + '&ajax=1', function(response) {

                wrapper.removeClass('loader-bg');
                wrapper.html(response);
                sig.init();

                return false;
            });

        } else {
            return false;
        }
    });
};

我使用代码调用它：

$('.pagination > li > a').ajaxPagination();

有时锚链接会从 ajax 的结果中显示出来。因此它们成为动态创建的元素。由于这些锚标记的动态创建，我无法调用此函数。如果是点击或任何其他事件，我知道如何解决这个问题。但这是一个函数的调用。如何解决这个问题？欢迎任何想法。 :)

【问题讨论】：

动态创建的锚点创建后添加点击事件。
感谢您的评论。成功了！

标签： javascript jquery ajax pagination

【解决方案1】：

我建议您使用事件委托。见https://learn.jquery.com/events/event-delegation/ 您应该在包含所有您动态创建的锚点、匹配选择器的父元素上绑定点击，并且您不必费心将点击事件添加到动态创建的元素。

【讨论】：

谢谢。我已经使用以下代码 sn-p 解决了这个问题： $(document).on('click', '.pagination > li > a', function(e) { e.preventDefault(); $(this).ajaxPagination( ); } );
这是对文件的委托。它有效，但是当您尝试将它们绑定到最近的非动态父级时，处理它的委托事件是有效的。为什么？考虑一个冒泡到这个委托事件处理程序（在你的情况下是文档）的单击事件，jQuery 必须遍历委托事件处理程序的列表，并查看原始元素是否与委托事件处理程序中的任何选择器匹配。并且大量点击会冒泡到文档中。