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

使用事件委托来处理事件：

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

另外，请勿使用setInterval的字符串：

setInterval("UpdateBuddyStat()", 3000);

传递功能：

setInterval(UpdateBuddyStat, 3000);

Answer 2

您需要事件委派：

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

委托给dom中最近的父母，或者改为使用document。

Answer 3

在动态加载HTML内容时，必须使用.on()作为事件侦听器。尝试

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

Answer 4

更改

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

到

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

click()方法仅适用于在页面加载期间添加的元素 - 您需要使用on()来动态添加内容。请注意，on()方法的选择器需要存在于文档加载中，并且必须是on()方法中使用的选择器的父元素（在此示例中为'[id^=TagsBuddy_]'）

使用jsondata从生成的html中无法使用Click listener

4 个答案: