Question

我使用ajax将内容加载到div中。我遇到的问题是在内容加载后，头文件中的javascript不再有效。首次加载页面时，.game_block_saturday上的悬停事件可以正常工作。在AJAX调用之后，悬停在.game_block_saturday上不再有效。控制台中没有错误。

view_hod_games.php中的HTML：

<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：

$('div.game_block_saturday').hover(
    function(){
        $(this).find('#roster').show();
    },
    function(){
        $(this).find('#roster').hide();
    }   
);

Answer 1

每次AJAX调用更改结果div时，您的绑定都会丢失。请改为使用文档绑定。您出于此目的使用.on()。

以下是绑定到文档时复制.hover()功能的方法。

$(document).on({
    mouseenter: function() {
        $(this).find('#roster').show();
    },
    mouseleave: function() {
        $(this).find('#roster').hide();
    }
}, 'div.game_block_saturday');

AJAX调用后，JavaScript不再有效

1 个答案: