Почему не работают функции jQuery для подгружаемого контента?

Question

[B1ackGh0st]

Здрасте.

Есть функция для вывода таблицы через AJAX

$(function() {
  $('#getShelving').click(function(){
    $.ajax({
      url: "ajax/echoShelving.php",
      cache: false,
      success: function(html){
	$("#resultshelvingAdd").html(html);
      }
    });
        $.ajax({
      url: "ajax/echoStorageOption.php",
      cache: false,
      success: function(html){
	$("#resultechoCtorageOption").html(html);
      }
    });
  });
});

и функция удаления этих строк

$(function() {
$('.delShelving').on('click', function() {
  if(confirm("Вы уверенны что хотите удалить?"))	{
   $('#load').fadeIn();
    $(this).parent();
    var id = $(this).attr("id");
    $.post("ajax/delShelving.php",{id : id},AjaxSuccess);
    $(this).parent().slideUp('slow', function() {$(this).remove();});
    // Вывод соощения о успешном удалении строки
    function AjaxSuccess(data)
    {
      alert("Удалено");
      //$('#otvet').html(data);
    }
    return false;
  }
});
});

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

Answer 1

[evnuh]

$('.delShelving').on('click', function() {
// меняем на 
$(document).on('click', '.delShelving', function() {

и пробуем. Должно теперь заработать.

А дальше идём в гугл, оттуда попадаем на сайт jQuery на странику метода .on() и читаем что такое Direct and delegated events и как они баблятся (bubble) наверх по DOM дереву.

Comments

[Юрий Лобанов]

@evnuh допишите, чтобы автор не забыл после того, как сработает $(document), и он разберется что такое делегирование, заменить document на ближайшего родителя, который не добавляется динамически.

[evnuh]

@iiil нет никакой разницы на каком из этапов отработает хендлер, пара микросекунд не сыграют роли.

[Юрий Лобанов]

@evnuh ну я сам не сторонник копейки считать, и тем не менее.
@B1ackGh0st а Вы собственно куда делись? Ответ Вам написали.

Answer 2

[Юрий Лобанов]

Почитайте про прямую и делегированную обработку, используйте

$('parent').on('click', 'child', function(){ //... });
// parent — ближайший родитель, который не добавляется динамически
// child — Ваш элемент, на который Вы навешиваете событие click, т. е. '.delShelving'