未能使jQuery委派工作

Failing to get jQuery delegation working

本文关键字：委派 工作 jQuery      更新时间：2023-09-26

我正在尝试让jQuery委派使用动态创建的元素。

我有一个列表，看起来像这样：

<div id="pagination" class="pagination light-theme simple-pagination" data-bind="pagination: { pagingInfo: pagingInfo }">
<ul>
    <li class="active"><span class="current prev">Prev</span>
    </li>
    <li class="active"><span class="current">1</span>
    </li>
    <li><a href="#page-2" class="page-link">2</a>
    </li>
    <li><a href="#page-3" class="page-link">3</a>
    </li>
    <li><a href="#page-4" class="page-link">4</a>
    </li>
    <li><a href="#page-5" class="page-link">5</a>
    </li>
    <li class="disabled"><span class="ellipse">…</span>
    </li>
    <li><a href="#page-26" class="page-link">26</a>
    </li>
    <li><a href="#page-27" class="page-link">27</a>
    </li>
    <li><a href="#page-2" class="page-link next">Next</a>
    </li>
</ul>

其中元素及其子元素是在页面完成加载之后动态创建的。

我想在下面显示代码的元素上附加一个事件处理程序

$("#pagination").on("click", "a", function (event) {
        alert($(this).text());
        event.preventDefault();
    });

出于某种原因，我无法让它发挥作用。如果我更改为"mouseenter"，事件处理程序将正常工作，但我需要捕获点击事件。

有人能告诉我我在这里做错了什么吗？

提前谢谢。

编辑：我找到了这个问题的可能原因。我使用一个jquery插件来创建分页（simplePagination.js）。该插件可能会阻止事件传播。我将对此进行进一步调查。

我认为您首先需要防止事件发生，这样您就不会被重定向：

$("#pagination").on("click", "a", function (event) {
    event.preventDefault();
    alert($(this).text());
});
相关文章：