Question

粘贴文本后，我想获取目标div的ID。之后div会动态生成，代码不起作用：

HTML

<div class="wrap">

<div class="entry" id="1" contenteditable="true">paste here</div>
<div class="entry" id="2" contenteditable="true">paste here</div>
<div class="entry" id="3" contenteditable="true">paste here</div>
<div class="entry" id="4" contenteditable="true">paste here</div>

 </div>

JS

$('.wrap').on("paste", function(){

    console.log("current box ID: " + $(this).attr("id") );
});

Answer 1

尝试使用父类.wrap当您粘贴.entry

时，需要使用div类

$('.wrap div.entry').on("paste", function(){   
    console.log("current box ID: " + $(this).attr("id") );
});

如果动态创建.entry，则可以使用event delegation

$(document.body).on('paste','.wrap .entry',function(){
    console.log("current box ID: " + $(this).attr("id") );
});

Fiddle

Answer 2

您需要查看事件的目标（事件发生的位置），然后找到包含该事件的.entry。如果要支持在.entry元素内部具有任何复杂结构，则无法直接查看目标。

$('.wrap').on('paste', function(event){
  console.log('paste id: ' + $(event.target).closest('.entry').attr('id'));
});

Answer 3

不确定为什么要将事件附加到“容器”上。我相信你有两个选择

$('.wrap').on("paste", function(e){

    console.log("current box ID: " + e.target.id );
});

或

$('.entry').on("paste", function(e){

    console.log("current box ID: " + this.id );
});

我会选择第二个选项，因为将事件direclty附加到相关元素而不是将其添加到容器并使用e.target方法更加清晰。

Answer 4

您正在将事件绑定到wrap div，以便this在回调中的含义。

将您的事件绑定更改为：

$('.wrap .entry').on("paste", function(){
    console.log("current box ID: " + $(this).attr("id") );
});

Answer 5

我会选择这个（只需少一点代码，但不多 -

$('.entry').on("paste", function(e){
    console.log("current box ID: " + this.id ); // this.id is all you need to get any current id
});

Answer 6

因为您将“粘贴”标记为“粘贴”。包装类上的事件（没有属性id）你得到一个NULL。

您必须将其绑定到您的输入字段，该字段具有id属性。

$('.wrap .entry').on("paste", function(){
    console.log("current box ID: " + $(this).attr("id") );
});

jQuery - 获取粘贴事件后的元素ID

6 个答案: