Jquery .on（'；animationend-webkitAnimationEnd-oAnimationEnd'；）只触发一次

我有一个动画，动画完成后，我使用局部视图来更新数据。

.on（'animationend webkitAnimationEnd oAnimationEnd'）

似乎只是第一次启动。如果知道为什么会发生这种情况，就好像JQuery没有识别出

$（“#marqueeTop span'）

部分

<div id="marqueeTop">
    <span class="moveTop">
        @foreach(var item in Model){
            <label>
                @Html.DisplayFor(x => item.GroupName)
                @Html.DisplayFor(x => item.Sales ).....
            </label>   
        }
    </span>
</div>

JQuery

 $('#marqueeTop span').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    $.get('/Home/GetBookingsTicker', function (response) {
        $('#marqueeTop').replaceWith(response);
    });
});

---

您正在

#marqueeTop span

上附加一个

eventListener

，并在此侦听器中删除（替换）

#marqueeTop

。（

$（'#marqueeTop'）。替换为（响应）；

）

由于您删除了

#marqueeTop

，因此您也删除了自己的

事件监听器

（在

上）。 以下是另一个问题作为参考：

您可以将委托事件处理程序与

当提供选择器时，事件处理程序称为 委派。当事件直接发生在上时，不调用处理程序 绑定元素，但仅适用于 匹配选择器

这样，您就可以删除和添加

#marqueeTop

，并且在该元素上仍然有一个eventListener

---

这里是一个演示：

感谢您的回答和精彩的解释。很好！我很高兴这有帮助：）

 $('#marqueeTop span').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    $.get('/Home/GetBookingsTicker', function (response) {
        $('#marqueeTop').replaceWith(response);
    });
});

$('body').on('animationend webkitAnimationEnd oAnimationEnd', '#marqueeTop span', function () {
    $.get('/Home/GetBookingsTicker', function (response) {
        $('#marqueeTop').replaceWith(response);
    });
});