ajax 호출 후 클릭 이벤트가 작동하지 않습니다.

Question

정말이 문제에 도움이되기를 바랍니다. 첫 페이지에는 효과가있는 Ajax 페이지 매김 스크립트가 있지만 클릭 이벤트는 페이징의 다른 페이지에서 작동하지 않습니다.

jQuery를 스크립트

<script type="text/javascript"> 
// prepare when the DOM is ready 
$().ready(function() { 
//popup div 
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box 

     var height = $('#popuup_div').height(); 
     var width = $('#popuup_div').width(); 
     //calculating offset for displaying popup message 
     leftVal=e.pageX-(width/2)+"px"; 
     topVal=e.pageY-(height/2)+"px"; 
     //show the popup message and hide with fading effect 
     $('#popuup_div').css({left:leftVal,top:topVal}).show(); 
     $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>"); 

     $.ajax({ 
      type: "get", 
      url: $(this).attr("href"), 
      success: function(r){ 
      $('#popuup_div').html("") 
      $('#popuup_div').prepend(r); 
      } 
    }); 

    }); 

//close div on mouse click 

$(".popup_msg").click(function(e){ 
     $('#popuup_div').fadeOut(); 
    }); 

}); 
</script> 

다른 페이지 콘텐츠와 사업부 팝업해야합니다

이 내가 그것을 설정을 가지고 방법이다.

지금 내 링크 : 초기 페이지에서 잘 작동하지만 페이지 동일한 링크가이 방문을 클릭하면 이제 문제는 <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

링크가 더 이상 작동하지 않습니다.

참고로 내 페이지는 div = "페이징"으로로드해야합니다. 아약스 페이징 자체는 훌륭하게 작동합니다. 결과 페이지의 jquery 클릭 이벤트가 작동하지 않습니다. 문제는 스크립트를 리 바인드해야 할 수도 있지만이를 수행하는 방법을 모른다는 것입니다.

감사합니다.

Answer 1

클릭 이벤트가 더 이상 바운드되지 않도록 페이지 매김 링크를 덮어 쓰는 것 같아요. jquery 1.3을 사용하는 경우 live events을 사용하여이 문제를 해결할 수 있습니다.

$(".wsbutton_pop").live("click", function(e) { ... 

이전 버전의 jQuery를 사용하는 경우 새 페이지 데이터를 다시 가져올 때 이벤트 핸들러를 다시 연결할 수 있습니다.

Answer 2

설명에 따르면 .wsbutton_pop이 포함 된 새 페이지를 생성하는 것처럼 들립니다. 그렇다면 onclick 기능을 첨부해야합니다. 초기 스크립트는 첫 번째로드에서만 실행되기 때문에 등록은 그 당시의 .wsbutton_pop에 대한 것입니다.

Answer 3

스크립트를 리 바인드하는 것이 맞습니다. 그 이유는 페이지의 요소가 아약스 포스트 백 중에 다시 만들어지고 있기 때문입니다.

과 같이 당신이 jQuery를 1.3를 사용하는 이상 당신이 (클릭당) 라이브 이벤트를 사용할 수있는 경우 다음과 같은 이벤트가 작동하지 않습니다 이벤트를 살고

$(".wsbutton_pop").live("click", function(e){ 
    ... 
}); 

참고 : 변경, 포커스, mouseenter를 흐리게 , mouseleave 및 submit.

당신이 jQuery를 1.3을 사용하지 않는, 또는 위의 이벤트 중 하나를 사용해야하는 경우, 당신은 메모리 누수를 방지하려면 다음 문서의 조언을 따라야합니다 : 당신은 초기 바인딩하는 Code-Project Article

Answer 4

. wsbutton_pop 요소. 이러한 클래스가 제거되고 .wsbutton_pop 클래스의 새 요소가 추가되면 사용자가 한 번 클릭 한 클릭 이벤트 핸들러를 자동으로받지 않습니다.

당신이 찾고있는 현재 페이지 .wsbutton_pop의 모든 인스턴스에 적용됩니다

$(".wsbutton_pop").live("click", function(e) {...}); 

이며, 어떤 생성 얻을.

- = - = - = - = - = - = - = - = - = -이를 쓴

다른 답변이 와서 우리가 브라이언 피셔의 게시물의 매시업을 얻는 경우에, 나는 말할 것 Jimmie R. Houts의 답변이 가장 좋을 것입니다. 아마도 현재 DOM에있는 요소 만 $ (..)를 사용할 때 이벤트 핸들러를받습니다. click (...)