【jQuery】appendしたvideoタグのイベント操作をしたい

Question

    <div id="movie_wrapper">
        <label for="movie">動画を選択</label>
        <input id="movie" type="file" accept="video/*"></input>
    </div>

$(document).ready(function() {

    // フォームデータクラスをインスタンス化
    var formData = new FormData();

    // ファイルリーダークラスをインスタンス化
    var fileReader = new FileReader();


    if (window.matchMedia('screen and (min-width: 992px)').matches) {

        uploadMovie();
        test();

    } else if(window.matchMedia('screen and (max-width: 991px) and (min-width: 0px)').matches) {



    }

    /********** ここから各イベントごとのメソッドを宣言 **********/

    function uploadMovie() {
        $('#movie').on('change', function() {
            console.log("test");
            // .previewの中に入っているmovieタグをremoveする
            $("#movie_wrapper").children('movie').remove();
            console.log($(this).val());
            if ('' !== $(this).val()) {
            // ファイルが選択されている場合

                // formDataにデータを追加
                formData.append('movie', $(this).prop('files')[0]);
                fileReader.onload = function() {
                    // ファイル読み込み完了時
                    // 新しい画像をappendする
                    $("#movie_wrapper").append('<video id="movie_preview" preload="auto" controls><source src="' + fileReader.result + '" type="video/mp4"></video>');
                // console.log($("video").currentTime);
                }
                // 動画読み込み実行
                fileReader.readAsDataURL($(this).prop('files')[0]);

            }

        });
    }

    function test() {
        $("#movie_wrapper").on('timeupdate', '#movie_preview', function() {
            console.log("tes");
            // if ($(this).currentTime >= 10 ) {
            //     // 10秒以上経過した際の処理
            //     // 動画の長さは$(this)[0].duration
            // }
        });
    }

});

testメソッドのtimeupdateが機能しません。
clickだとうまくいきます。

Answer 1

<vidoo>は動的に追加されるものなので、動的に追加したイベントを拾うなら、$("#movie_wrapper").append()を行った後に.on('timeupdate', func)を設定しないとダメかと。
(timeupdateイベントはバブリングされないため、$(document).on('timeupdate', '#movie_preview', func) の方法は使用できません。)

Comments

[NobumitsuHata]

助かりました。
ありがとうございます！

Answer 2

1．動画が完全にロードされる前にtest()している

2．```javascript
$("#movie_wrapper").on('timeupdate', '#movie_preview', function() {

少し書き方が違うかも

その他.
appendしていくと同じIDが出来てしまい動かなくなる