jQuery - получить идентификатор элемента после события вставки

Question

jQuery - получить идентификатор элемента после события вставки

0

После вставки текста я хочу получить идентификатор целевого div. Позже divs генерируются динамически, код не работает:

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

user2952265 14 апр. 2014, в 19:36

Источник

Теги:

javascript

jquery

html

6 ответов

3

Вам нужно посмотреть на цель события (откуда произошло событие), а затем найти .entry который обертывает это. Вы не можете смотреть прямо на цель, если хотите поддерживать любую сложную структуру внутри элементов .entry.

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

squid314 14 апр. 2014, в 15:45

3

Не знаете, почему вы присоединяете событие к "контейнеру". Я считаю, у вас есть 2 варианта

$('.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.

Claudio Redi 14 апр. 2014, в 14:38

1

Я бы пошел с этим (немного меньше кода, но не так много -

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

Jay Blanchard 14 апр. 2014, в 15:56

1

Вы привязываете событие к обертке div, так что this означает, что в обратном вызове.

Измените привязку к событию:

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

Andre 14 апр. 2014, в 15:40

1

Поскольку вы привязали событие "вставить" в класс wrap (который не получил идентификатор атрибута), вы получаете NULL.

Вы должны привязать к нему свои поля ввода, которые имеют атрибут id.

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

bobthedeveloper 14 апр. 2014, в 15:10

Ещё вопросы

Dhaval Marthak · Accepted Answer · 2014-04-14T15-11-00.000Z

Попробуйте использовать родительский класс .wrap Вам нужно использовать класс .entry когда вы .entry этот div

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

Если .entry создается динамически, вы можете использовать делегирование событий

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

скрипка

а если .entry создается динамически?