Почему мой jquery-скрипт не работает?

Question

Я написал сценарий, который получает данные (в стиле Json) из метода и показывает его в теге div с помощью кнопки закрытия, когда я нажимаю кнопку закрытия, это не работает! мой скрипт:

$(document).ready(function() { 
     $("#go").click(function() { 
      setInterval(function() { 
       $.ajax({ 
        type: "POST", 
        url: "WebForm2.aspx/GetMyBooks", 
        data: '{}', 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (response) { 

         for (var i = 0; i < response.d.length; i++) { 
          $("#pejiGrid").append("<div class='modal'><div style='float:left;'><span class='close'>X</span></div>" + response.d[i].BOOK_NAME + "<br/>" + response.d[i].BOOK_DESC + "</div><br/>"); 
         }; 
        }, 
       }); 
       $('.modal').hover(
        function() { 

         $(this).find('.close').delay(0).fadeIn(300); 

        }, 
        function() { 

         $(this).find('.close').delay(0).fadeOut(500); 
        }); 

      }, 5000); 
     }); 

     $('span.close').click(
      $(this).closest('div.modal').fadeOut(0) 
      ); 
     }); 

В чем проблема?

EDIT: о моем парении сценарий я должен сказать, что это показывает кнопку закрытия задержки, но я дал нолю задержать значение:

$('.modal').hover(
        function() { 

         $(this).find('.close').delay(0).fadeIn(300); 

        }, 
        function() { 

         $(this).find('.close').delay(0).fadeOut(500); 
        }); 

некоторых тела может мне помочь в чем проблема?

Answer 1

Вы должны использовать event delegation здесь, чтобы связать click событие в динамически созданный div и span элемент внутри #pejiGrid:

$('#pejiGrid').on('click', 'span.close', function() { 
    $(this).closest('div.modal').fadeOut(0); 
});