클릭 기능이 자동 페이지 새로 고침 후 작동하지 않습니다.

Question

Javascript를 사용하여 매 25 초마다 페이지를 새로 고침합니다. 페이지 새로 고침 전에 또 다른 Javascript가 페이지 새로 고침 전에 작동하지만 페이지 새로 고침 후 작동하지 않습니다.

HTML :

<div id="refreshOnline"> 
    <div id="refreshData"> 
    //Set of Functions 
    <a target="_blank" href="http://example.com/startgame.php?gname='.$key['gameName'].'&player='.$_SESSION["uname"].'&type=t20" class="btn btn-primary btn-sm popup-game" id="popup-game" >Play Now!</a> 
    </div> 
</div> 

자바 스크립트 : 새로 고침 스크립트의 실행 후, 링크가 새 탭 대신 새 창에서 열립니다 반면

<script type="text/javascript"> 
    //Script to refresh Div 
    function show_data() 
    { 
    $('#refreshOnline').load('main.php #refreshData'); 
    } 
    setInterval('show_data()', 25000); 

    //Script to oprn link in new window 
    $('#popup-game').click(function (event) { 
    event.preventDefault(); 
    alert("Working"); 
    window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes"); 
    }); 
</script> 

새로 고침하기 전에 링크가 새 창에서 열립니다.

Answer 1

클릭 핸들러가 새 콘텐츠에 지정되지 않았기 때문입니다. 다음과 같이 내용을 변경 한 후에 다시 설정하십시오.

<script type="text/javascript"> 
//Script to refresh Div 
function show_data() 
{ 
    $('#refreshOnline').load('main.php #refreshData'); 
    setClickers(); 
} 

function setClickers(){ 
    //Script to oprn link in new window 
    $('#popup-game').click(function (event) { 
    event.preventDefault(); 
    alert("Working"); 
    window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes"); 
    }); 
} 

$(function(){ 
    setClickers(); 
    setInterval('show_data()', 25000); 
}); 
</script> 

Answer 2

div의 내용을 새로 고칠 때마다 click 이벤트를 등록해야합니다.

Answer 3

코드 :

$('#popup-game').click(... 

는 그 코드가 실행되는 순간에 존재하는 #popup-game 요소에 클릭 핸들러를 결합한다. 해당 요소가 #refreshOnline의 하위 요소 인 경우 #refreshOnline을 새로 고치면 해당 요소가 바뀌므로 해당 요소의 새 버전에는 클릭 경계가 없습니다.

$('#refreshOnline').on('click', '#popup-game', function(event) { 
    event.preventDefault(); 
    alert("Working"); 
    window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes"); 
}); 

이 실제로 #refreshOnline에 핸들러를 결합하지만, 클릭이 jQuery를 발생 때 두 번째 매개 변수 만 통화에서 선택 일치하는 자식 요소 인 경우 자동 확인 : 대신 위임 된 이벤트 핸들러를 사용할 수 있습니다 귀하의 기능이 있다면 그렇게하십시오.

자세한 내용은 the .on() doco을 참조하십시오.