Выберите ID в событии click jquery

Question

У меня есть div, в который я могу вставлять слова и поле ввода, пользователь может ввести слово на вход и сохранить их для отображения на div «display_words». Теперь я хочу, чтобы иметь возможность удалить выбранные слова из этого DIV и я назначая динамический идентификатор этих слов, и это выглядит следующим образом:

<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, потому что идентификаторы являются динамическими. Благодаря

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

Метод on() поддерживается в JQuery 1.7+ (и 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(); 
}); 

Ссылки:

• delegate().
• live().
• on().

Answer 2

Вы можете сделать

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

Answer 3

Вы можете использовать .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 4

Try:

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

.live() устарела в пользу .on() и полностью удалены в JQuery 1.9. Что еще более важно, когда вы добавляете элементы динамически, вам необходимо связать с помощью через делегированный элемент.

Answer 5

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