.on('animationend webkitAnimationEnd oAnimationEnd') 只触发一次

Question

我有一个动画，动画完成后我使用局部视图来更新数据。 .on('animationend webkitAnimationEnd oAnimationEnd')似乎只是第一次开火。知道为什么会发生这种情况，就像 JQuery 无法识别.Here是我希望它做的事情$('#marqueeTop span')的jsfiddle。

部分的

<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>

CSS

#marqueeTop {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

#marqueeTop span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    font-family:wallStreetFont;
}
.moveTop{
    animation: marqueeTop 5s linear infinite;
    animation-iteration-count:1;
}

查询

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

Answer 1

您正在附加一个eventListeneron#marqueeTop span和在这个监听器中删除 (replace) #marqueeTop。( $('#marqueeTop').replaceWith(response);)

既然你删除了#marqueeTop你也删除了你自己的eventListener（在 上<span>）。这是另一个问题作为参考：如果删除了 DOM 元素，它的侦听器是否也从内存中删除？

您可以使用委托的事件处理程序 .on()

当提供选择器时，事件处理程序被称为委托的。当事件直接发生在绑定元素上时，不会调用处理程序，而是仅针对与选择器匹配的后代（内部元素）调用处理程序。

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

像这样，您可以删除和添加#marqueeTop该元素，并且仍然有一个 eventListener 。

这是一个演示：http : //jsfiddle.net/m95pzsau/5/