Question

我有一个动画，动画完成后我使用局部视图来更新数据。 .on('animationend webkitAnimationEnd oAnimationEnd')似乎只是第一次开火。不知道为什么会发生这种情况，它就像JQuery没有认识到$('#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;
}

JQuery的

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

Answer 1

您正在eventListener上附加#marqueeTop span，并且在此侦听器中删除（替换）#marqueeTop。（$('#marqueeTop').replaceWith(response);）

自您删除#marqueeTop后，您还会删除自己的eventListener（在<span>上）。以下是另一个问题：If a DOM Element is removed, are its listeners also removed from memory?

您可以将委派的事件处理程序与.on()

一起使用

提供选择器时，事件处理程序称为授权。直接在事件发生时不会调用处理程序绑定元素，但仅适用于后代（内部元素）匹配选择器。

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

像这样你可以删除并添加#marqueeTop，并且在这个元素上仍然有一个eventListener。

以下是演示：http://jsfiddle.net/m95pzsau/5/

.on（＆＃39; animationend webkitAnimationEnd oAnimationEnd＆＃39;）只触发一次

1 个答案: