2013-03-11 93 views
0

我将一个xml文件保存到一个json对象中,然后循环显示它在一个容器中,然后尝试点击标题但没有任何反应。我的jquery没有触发点击事件

$(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> 

任何有关为什么事件未被解雇的建议?

+0

你的代码看起来不错。尝试将'on'函数添加到'document.ready'。 – 2013-03-11 11:07:59

回答

2

试穿委托..

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

或者其委派到存在于文档中最接近的父元素......

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

经过link,如果你想了解更多关于在事件

+0

谢谢,非常感谢 – Arianule 2013-03-11 11:22:38

+0

weclome ....很高兴它帮助..快乐编码... – bipen 2013-03-11 11:24:49