0

xml ファイルを json オブジェクトに保存し、タイトルをループしてコンテナーに表示し、タイトルをクリックしようとしましたが、何も起こりません。

$(document).ready(function() {
$.get("Titles.xml", function(data, status) {
    var jsonObj = $.xml2json(data);
    $("#videoListTmpl").tmpl(jsonObj).appendTo("#titlesContainer");
});

$(".videoItem").on('click', function() {
    console.log("this is the click");
});

HTML ファイル。

<body>
<div id="container" style="margin-right: auto;margin-left: auto;width:960px;clear:both">
<div style="margin:0 auto;width:260px;float:left;height:400px;overflow:scroll" id="titlesContainer"></div>
<div style="margin:0 auto;width:670px;float:right;" id="titleContainer"></div>
</div>
<script id="videoListTmpl" type="text/x-jquery-tmpl">
    {{each Titles}}
        <div class="videoItem" style="cursor:pointer">
            ${titles}
        </div>
    {{/each}}
</script>

イベントが発生しない理由について何かアドバイスはありますか?

4

1 に答える 1

2

デリゲートを試着..

 $(document).on('click',".videoItem", function() {
    console.log("this is the click");
});

または、ドキュメントに存在する最も近い親要素に委任します...

$("#titlesContainer").on('click',".videoItem", function() {
     console.log("this is the click");
});

イベントについて詳しく知りたい場合は、リンクをたどってください

于 2013-03-11T11:08:03.713 に答える