Question

我正在尝试让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）。插件可能会阻止事件传播。我会进一步调查。

Answer 1

我认为您需要首先阻止该事件，以免您被重定向：

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

未能使jQuery委派工作

1 个答案: