1

I'm using ajax to load content into a div. The problem I'm having is after the content loads, the javascript from the header file no longer works. When the page first loads, the hover event on .game_block_saturday works fine. After the AJAX call, the hover on .game_block_saturday no longer works. There are no errors in the 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 from header file:

$('div.game_block_saturday').hover(
    function(){
        $(this).find('#roster').show();
    },
    function(){
        $(this).find('#roster').hide();
    }   
);
cpcdev
  • 1,130
  • 3
  • 18
  • 45

1 Answers1

3

Your losing your binding each time the result div is changed by your AJAX call. Use a binding to the document instead. You use .on() for this purpose.

Here's how you replicate the .hover() functionality while binding to the document.

$(document).on({
    mouseenter: function() {
        $(this).find('#roster').show();
    },
    mouseleave: function() {
        $(this).find('#roster').hide();
    }
}, 'div.game_block_saturday');
phpisuber01
  • 7,585
  • 3
  • 22
  • 26
  • What about a mobile solution? Tried using .on() and it does not recognize the event on mobile. – cpcdev Jun 22 '14 at 18:05
  • @cpcdev You should post that as a new question or look to see if that has been answered before. I'm not educated on how hover events work with mobile devices. – phpisuber01 Jun 23 '14 at 18:26