javascript - <ul><li> 元素的 jQuery 点击函数

Question

我有一个无序列表，如下所示:

<ul id="frozen" data-name="nameOfSelect" class="tagit">
   <li class="tagit-choice" tagvalue="2" style="padding-right: 4px;" id="tag-2">
      <div class="tagit-label" data-value="2">kázeň</div>
   </li>
   <li class="tagit-choice" tagvalue="1" style="padding-right: 4px;" id="tag-1">
      <div class="tagit-label" data-value="1">žalmxxxx</div>
   </li>
</ul>

我需要将点击功能绑定(bind)到所有这些并获取 id="tag-1" 的数据在函数中使用。

我试过这个:

$('#[id|="tag"]').each(function(){
    var tag = this.attr('id'); 
    var tagID = tag.replace('tag-',''); 
    this.click(function (){
       alert('index.php?s=taglist&tag=' + tagID);
       //window.location = string;
    });
});

但是，出于某种原因，这种方法对于 <li> 似乎是错误的元素，因为我在使用选择器时遇到了问题(看起来)。也许我还遗漏了一些愚蠢的东西......有什么想法吗？

Answer 1

不需要循环，jQuery 在内部完成，this 是一个原生 DOM 元素，它有一个 id 属性，但没有 attr() 方法:

$('[id^="tag-"]').on('click', function() {
    var tag = this.id,
        tagID = tag.replace('tag-', '');

    alert('index.php?s=taglist&tag=' + tagID);
});