php - JavaScript in <head> no longer works after AJAX call -
this question has reply here:
events triggered dynamically generated element not captured event handler 5 answersi'm using ajax load content div. problem i'm having after content loads, javascript header file no longer works. when page first loads, hover event on .game_block_saturday works fine. after ajax call, hover on .game_block_saturday no longer works. there no errors in console.
html in view_hod_games.php:
<div id="result"> <div class="game_block_saturday"> <div id="roster"> roster text </div> </div> </div> ajax:
ajax=ajaxcaller(); ajax.open("get", 'https://myurl.com/view_hod_games.php/?sort=' + value + '', true); ajax.onreadystatechange=function(){ if(ajax.readystate==4){ if(ajax.status==200){ document.getelementbyid('result').innerhtml = ajax.responsetext; } } } ajax.send(null); js header file:
$('div.game_block_saturday').hover( function(){ $(this).find('#roster').show(); }, function(){ $(this).find('#roster').hide(); } );
your losing binding each time result div changed ajax call. utilize binding document instead. utilize .on() purpose.
here's how replicate .hover() functionality while binding document.
$(document).on({ mouseenter: function() { $(this).find('#roster').show(); }, mouseleave: function() { $(this).find('#roster').hide(); } }, 'div.game_block_saturday'); javascript php ajax
No comments:
Post a Comment