なぜonclick機能が動作しませんか？

Question

私は単純に、#thumbの子要素.video-thumbnailがjQueryを使用してクリックされたインデックスを取得しようとしています。デバッガでは、ページが最初にロードされ、on.('click'...)関数に行き、2回以上ホバーすると、$(document).ready(...)という別のテストが実行され、同じことが2回実行されてからページがロードされます警告ボックスに-1（つまり、video-thumbnail要素が存在しないことを意味します）を指定します。それから、.video-thumbnailの要素の1つをクリックしたところ、何も起動しませんでした。それが再び発生したのは、jQueryセレクタを ("#thumb").on('click', function(){...});に変更したときに、正しいインデックスが選択されて返されました。

jsfiddleではサムネイルを動的に作成していて、ローカルホストのページからエラーを複製できませんでした。なぜ私は同じ結果がlocalhostで動作しないのか分かりません。

私のページにエラーがないかチェックしましたが、すべて正常に動作しています。何が間違っていますか？インデックスの結果を得るには別の方法がありますか？

JS：

$(document).ready(function() 
{ 
    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + '/Views: ' + "24" + '</p></div>'; 
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + '/Views: ' + "42" + '</p></div>'; 

    $('#thumb').append(vidThumbnail); 
    $('#thumb').append(vidThumbnail2); 

    //$("#thumb").on('click', function() WORKS AND FIRES the onclick() when clicked on after page loaded 
    $("#thumb .video-thumbnail").on('click', function() 
    { 
     console.log($("#thumb .video-thumbnail").index(this)); 
     alert($("#thumb .video-thumbnail").index(this)); // return index that was clicked 
    }); 
}); 

Answer 1

あなたは間違って使用していると思います。あなたは、むしろそうのようなトップレベルの要素にバインドする必要があります

$('body').on('click', '.video-thumbnail', function(){ 
}); 

私はあなたのjsfiddleにこれを追加しました：https://jsfiddle.net/wh501p71/1/

Answer 2

は、以下の例では、DOMロードreadyイベントの内いずれかの操作を行う必要があります。クリックイベントと定義をjquery文書にチェックする必要があります。

$(document).ready(function() 
{ 

    var vidThumbnail = '<div><div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + '/Views: ' + "24" + '</p></div>'; 
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + '/Views: ' + "42" + '</p></div></div>'; 

    $('#thumb').append(vidThumbnail); 
    $('#thumb').append(vidThumbnail2); 


    $("#thumb .video-thumbnail").click(function(e){ 
     alert($(this).index()); // return index that was clicked 
    }) 

});