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

Question

Я обновляю свою страницу каждые 25 секунд с помощью Javascript. Но другой Javascript для функции click отлично работает до обновления страницы, тогда как после обновления страницы это не работает.

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> 

Javascript:

<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

Необходимо зарегистрировать событие click каждый раз, когда вы обновляете содержимое div.

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.