After pasting text, I want to get the ID of the target div. Later the divs are generated dynamically, code does not work:

js fiddle

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") );
});

After pasting text, I want to get the ID of the target div. Later the divs are generated dynamically, code does not work:

js fiddle

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") );
});

• javascript
• jquery
• html

6 Answers 6

Try you're using parent class.wrap You need to use .entry class as you are pasting in that div

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

If .entry is created dynamically then you can use event delegation

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

Fiddle

You need to look at the target of the event (which is where the event originated) and then find the .entry which wraps that. You can't necessarily look directly at the target if you want to support having any plex structure inside of the .entry elements.

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

Not sure why you're attaching the event against the "container". I believe you have 2 options

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

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

or

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

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

I'd go with the second option since it's more more clear to attach the event direclty to relevant elements instead of doing it to the container and use the e.target approach.

You are binding the event to the wrap div, so that's what this means for in the callback.

Change your event binding to:

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

I'd go with this (just a little less code, but not much -

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

Because you binded the 'paste' event on the wrap class (which doesn't got an attribute id) you get a NULL.

You have to bind it you your entry fields, which have the id attribute.

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