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

무엇이 문제입니까?

편집 :

이

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

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

        }, 
        function() { 

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

일부 몸이 문제가 무엇인지 나에게 도움이 될 수 있습니다 내 호버 스크립트 내가 그것을 지연에 의해 닫기 버튼을 보여줍니다하지만 난 값을 지연 제로 준 말을해야에 대해서?

Answer 1

당신은에 click 이벤트를 바인딩하려면 여기를 event delegation을 사용할 필요가 귀하의 동적 div 및 span 요소 #pejiGrid 내부 생성 : 이제

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