Как при дополнении строк таблицы с помощью JQuery заставить работать события?

Question

[Игорь Мамушин]

Есть некая таблица, в которую необходимо при нажатии на кнопку добавлять новую строчку, делаю это вот так:

$('#add_row').click(function(){
     $('#punct_spec').append('<tr><td><img class="del_punct"/></td></tr>');
})

Далее есть события:

$('.del_punct').mouseenter(function(){
      $(this).attr('src', 'img/del_png_red.png');	
});
		
$('.del_punct').mouseout(function(){
     $(this).attr('src', 'img/del_png.png');	
});

Суть в том что на форме созданной статически с помощью HTML события срабатывают, а на добавленных вышеописанным способом строчках не хотят работать

Comments

[versoul]

можно подписаться на события таблицы, а не каждой строчки, так и калбеков меньше будет

Answer 1

[anyd3v]

используйте метод on чтобы вешать события

Answer 2

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

$('#punct_spec').on('mouseenter', '.del_punct', function(){
      $(this).attr('src', 'img/del_png_red.png');	
});

$('#punct_spec').on('mouseout', '.del_punct', function(){
       $(this).attr('src', 'img/del_png.png');
});

Но, судя по коду, вашу задачу можно легко решить через css.

Comments

[Игорь Мамушин]

А можно подробнее про CSS?

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

.del_punct {
background: img/del_png_red.png;
}

.del_punct:hover {
background: img/del_png.png;
}

[Игорь Мамушин]

Спасибо

Answer 3

[versoul]

можно подписаться на события таблицы, а не каждой строчки, так и калбеков меньше будет