Добавленные элементы не реагируют на mouseenter?

Question

[seredaes]

В таблице 1 строка задана при загрузке, а вторую добавляю через append.
В строке есть элементы (например картинка с корзиной). В файле JS прописан код
$(.del_ico).mouseenter(function() { действия });
При наведении картинка изменяется.
В новодобавленной строке не срабатывает событие mouseenter.
Я так догадываюсь, что скрипт $(.del_ico).mouseenter(function() { действия }); не видит ново добавленные элементы или я где-то туплю?

Answer 1

[Алексей Уколов]

Конечно, не видит. Гуглить по запросу "javascript делегирование событий".
Или просто учебник почитать.

Comments

[seredaes]

$("#table_of_clients").bind("mouseenter",".deleteicon", function(event){
alert(event);
});

[seredaes]

Я вот так сделал, клик по таблице, по элементу иконки, но нефига не работает...

[seredaes]

Может поясните здесь :) что и как. И я бы хотел это Jquery сделать, а не чистым JS

[seredaes]

И вот так попробовал
$(".td_element").on("mouseenter",".deleteicon", function(event){
alert(event); }

[Алексей Уколов]

seredaes: я помогу только при наличии кода выложенного на jsfiddle.

Answer 2

[Виталий Инчин ☢]

Вы устанавливаете обработчик на все существующие на момент выполнения кода элементы. Разумеется, свежедобавленные будут без него.

Ловить событие надо на предке, который никуда не денется.

$(document).on("mouseenter", ".del_ico", function() { 
  //действия 
});

Answer 3

[seredaes]

$("#table_of_clients").delegate( ".deleteicon", "mouseenter", function() { alert("OK"); });

Вот так решается это в JQuery

Comments

[Алексей Уколов]

Это устаревшая форма записи. Современная выглядит так:

$("#table_of_clients").on("mouseenter", ".deleteicon", function() { alert("OK"); });