jquery - 点击监听器无法从使用 jsondata 生成的 html 中工作

Question

无法从元素获取点击监听器的值。
当我点击“tagit”时，什么也不会发生，不知道为什么!!

我的 javascript 中有以下代码:

<script type="text/javascript">
function UpdateBuddyStat()
{
    $.getJSON('/update-buddies', function(jsonData){

     var counterjson = 0;
     var LI_list_html = '';

     $.each(jsonData, function(i,value){

      var count = counterjson++;
      var username = jsonData[i].name;
      var buddy = jsonData[i].buddyid;

      var DIV_html = username+' <div class="FunctionBuddyBox"><span class="TagBuddy" id="TagsBuddy_'+buddy+'" data-tagbuddyid="'+buddy+'">tagit</span></div>';

      LI_list_html = LI_list_html+'<li>'+DIV_html+'</li>';
     });

     $("#ShowBuddyList ul li").remove();
     $("#ShowBuddyList ul").html(LI_list_html);  
    })
}
setInterval("UpdateBuddyStat()", 3000);
</script>

这就是我吸引听众的方式:

$('[id^=TagsBuddy_]').click(function(){
    var buddyid = $(this).data('tagbuddyid');
    alert(buddyid);         
});  

通过下面的代码(静态html)，它可以正常工作:

<?php echo $value['name'] ?> <div class="FunctionBuddyBox">
<span class="TagBuddy" id="TagsBuddy_<?php echo $value['fb_id'] ?>" data-tagbuddyid="<?php echo $value['fb_id'] ?>">tagit</span>
</div>  

不知道为什么!有什么建议吗？非常感谢。

Answer 1

使用事件委托(delegate)来处理事件:

$('#ShowBuddyList').on('click', '[id^=TagsBuddy_]', function() {
    var buddyid = $(this).data('tagbuddyid');
    alert(buddyid);         
});

另外，不要将字符串与 setInterval 一起使用:

setInterval("UpdateBuddyStat()", 3000);

传递函数:

setInterval(UpdateBuddyStat, 3000);