Question

我有一个可以插入单词和输入字段的div，用户可以在输入中键入单词并保存它们以显示在div“display_words”上。现在我希望能够从该div中删除选定的单词，并为这些单词分配动态ID，它看起来像这样：

 <div id="display_words">
   <div class="clhotpages" id="word1">word1</div>
   <div class="clhotpages" id="word2">word2</div>
 </div>

我有一个功能，我可以检测到他们点击了“clhotpages”类：

      $(".clhotpages").live('click', function() {
        //GET ID TO REMOVE THAT WORD
        alert("click");
      });

现在我希望能够让用户在点击事件中从div中删除一个单词。

但我不知道如何从div中获取ID，因为ID是动态的。感谢

Answer 1

我建议：

$('#display_words').on('click','div.clhotpages', function(e){
    var id = this.id; // or e.target.id; gets the id
    $(e.target).remove(); // removes the word
});

jQuery 1.7+支持on()方法（从{1.7}开始不推荐live()，从1.9开始删除）。但是，在jQuery 1.7之前，建议使用delegate()而不是live()。

使用delegate()，上述内容将写为：

$('#display_words').delegate('div.clhotpages', 'click', function(e){
    var id = this.id; // or e.target.id
    $(e.target).remove();
});

参考文献：

Answer 2

尝试：

$("#display_words").on('click', '.clhotpages', function() {
   var id = $(this).attr('id');
   alert("click");
});

.live()已被弃用，支持.on()，并在jQuery 1.9中完全删除。更重要的是，当您动态添加元素时，您需要通过委托元素与on进行绑定。

Answer 3

你可以做到

$(".clhotpages").click(function() {
    var currentID = $(this).attr("id");
    $(this).remove();
});

Answer 4

您可以使用.attr() function提取特定属性。

$(".clhotpages").live('click', function() {
  $(this).attr('id');
});

话虽如此，您不必提取id以删除元素。在单击回调中，您可以使用$(this)变量来引用所单击的实际元素。所以你可以这样做 -

$(".clhotpages").live('click',function(){
  $(this).remove();
});

您可能还希望使用.on() function替代.live()。 .live()函数正在弃用过程中。使用.on()，您的代码将如下所示：

$("#display_words").on('click','.clhotpages',function(){
  $(this).remove();
});

我假设页面加载时存在#display_words元素。

Answer 5

 $(".clhotpages").click(function(){
    alert($(this).attr('id'));
 });

在单击事件jquery上选择ID

5 个答案: