使用jQuery单击li元素时的持续警报

Question

我有这个HTML代码：

<div id="pagination">
    <ul>
        <li class="active"><a href="?page=1">Page 1</a></li>
        <li class="active current"><a href="?page=2">Page 2</a></li>
        <li class="active"><a href="?page=3">Page 3</a></li>
    </ul>
</div>

我有这个jquery代码：

$("#paginacion ul li.active").click(function (event) {
    event.stopPropagation();
    alert();
    $(this).find("a").trigger("click");
});

为什么当我点击li元素时会出现警告？我无法停止警报。

我在jsfiddle中设置了样本：http://jsfiddle.net/dmoraroca/h5czs53e/2/embedded/result/

如果你能打开链接，请告诉我，谢谢。

Answer 1

在事件处理程序中，您将触发<a>标记内的<li>标记上的点击事件。所以你处于无限循环的事件中，并且你有无限的警报。

Answer 2

为什么你不能这样做：

jQuery("#paginacion ul li.active").click(function (event) {
    event.stopPropagation();
    alert();
    window.location = $(this).find("a").attr("href"); // redirect to link address
    // do what you want here
});

或：

jQuery("#paginacion ul li.active > a").click(function (event) {
    event.stopPropagation();
    alert();
    // do what you want here
});

段：

＆＃13;

＆＃13;

 jQuery("#paginacion ul li.active").click(function (event) {
            event.stopPropagation();
            alert();
            window.location = $(this).find("a").attr("href");
        });

＆＃13;

.current {
    background-color: yellow;
}

.active {
    background-color: silver;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="paginacion">
<ul>
    <li class="active"><a href="?page=1">Page 1</a></li>
    <li class="current"><a href="?page=2">Page 2</a></li>
    <li class="active"><a href="?page=3">Page 3</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;