0

我有一个 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 是动态的。谢谢

4

5 回答 5

4

我建议：

$('#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()方法（live()从 1.7 开始不推荐使用，从 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();
});

参考：

于 2013-05-01T16:36:12.117 回答
3

尝试：

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

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

于 2013-05-01T16:35:13.190 回答
0

你可以做

$(".clhotpages").click(function() {
    var currentID = $(this).attr("id");
    $(this).remove();
});
于 2013-05-01T16:34:43.000 回答
0

您可以使用该.attr()函数来提取特定属性。

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

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

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

您可能还想使用该.on()函数作为.live(). 该.live()功能正在被弃用。使用.on()，您的代码将如下所示：

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

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

于 2013-05-01T16:34:53.640 回答
0 
 $(".clhotpages").click(function(){
    alert($(this).attr('id'));
 });
于 2013-05-01T16:35:14.550 回答