-1

単純な JQuery コードでイベントがバインドされないのはなぜですか? - http://pastebin.com/24J6q5G0

関連セクション:

<div class="videoWrapper">
    <video controls preload autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

<div class="videoWrapper">
    <video controls preload="none">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

そしてJavaScript：

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.bind('ended', function() {
        vid1.show();
    })
})

(私はHTML5 ビデオが終了したときに Detect に従っています)

4

4 に答える 4

2

終了したイベントは伝播（バブリング）されないので試してみる

$(document).ready(function() {
    var wrappers = $('.videoWrapper');
    wrappers.eq(1).hide()
    wrappers.eq(0).find('video').bind('ended', function() {
        wrappers.eq(1).show();
    })
})

あなたの場合、イベントをラッピングdiv要素にバインドしていますが、endedイベントは親要素にバブルされていないため、ハンドラーは実行されません。

于 2013-09-30T10:08:18.513 に答える
-1

私が使用した解決策（その時点で[間違った]答えは1つしかなかったと思います）は次のとおりです。

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.children().bind('ended', function() {    // Note this line
        vid1.show();
    })
})
于 2013-10-02T12:55:02.277 に答える