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

Question

我有一个动画，在动画完成后我使用局部 View 来更新数据。 .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?

您可以将委托(delegate)事件处理程序与 .on() 一起使用

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

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

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

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