AJAX 加载不适用于脚本答案

【问题标题】：AJAX Load doesn't work with scriptAJAX 加载不适用于脚本
【发布时间】：2018-03-05 03:44:32
【问题描述】：

我正在尝试创建一个网站，当文档加载完成时，HTML 代码会加载到 div 中。但是，悬停功能不适用于 AJAX 加载。请帮忙。

$(document).ready(function() {
    $('#sidebar').load('sidebar-main.php');

    $("#sidebar .section").hover(function() {
            $('#sidebar .section .left-mark').show();
        },function(){
            $('#sidebar .section .left-mark').hide();
        });
});

“sidebar-main.php”文件：

<div class='section' onclick='header()'><div class='left-mark'></div></div>

主 PHP 文件中的侧边栏：

<div id='sidebar'></div>

【问题讨论】：

您是否尝试过使用 on 处理 ajax 处理程序，例如 $("#sidebar .section").on('hover',function(){ ...});
没用 :(
load() 在加载完成时有一个回调函数。我认为这意味着它是异步工作的。所以我建议使用回调函数。见：api.jquery.com/load

标签： javascript jquery html ajax

【解决方案1】：

试试这个

$('#sidebar').load('sidebar-main.php', bindHoverEvent);
function bindHoverEvent() {
    $("#sidebar .section").hover(function() {
       $('#sidebar .section .left-mark').show();
    }, function(){
        $('#sidebar .section .left-mark').hide();
    });
}

【讨论】：

【解决方案2】：

在新创建的元素上（请参阅 .load()），您需要将事件处理程序委托给您的 #sidebar 祖先。

因此，改变这个：

$("#sidebar .section").hover(function() {
    $('#sidebar .section .left-mark').show();
},function(){
    $('#sidebar .section .left-mark').hide();
});

到：

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});

一个演示：

//
// instead on next line, for testing I added the next one
//
//$('#sidebar').load('1.php');
$('#sidebar').append("<div class='section' onclick='header()'>aa<div class='left-mark'>bb</div></div>");

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='sidebar'></div>

【讨论】：

【解决方案3】：

所以这不起作用的原因是因为.load() 是异步的，这意味着.load() 调用之后的代码将在内容加载之前执行。这里有两种解决方案：

将您的 hover 调用放入回调处理程序中，如下所示：

$('#sidebar').load('sidebar-main.php', function() {
     $("#sidebar .section").hover(function() {
        $('#sidebar .section .left-mark').show();
     },function(){
        $('#sidebar .section .left-mark').hide();
    });
});

将hover 侦听器附加到body 标记，但仅在#sidebar .section 是悬停的元素时才调用。请注意，hover 是 mouseenter 和 mouseleave 的简写。像这样：

$('body').on('mouseenter', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').show();
}).on('mouseleave', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').hide();
});

在第二种解决方案中，您不必担心加载是异步的，因为侦听器已经附加到主体。

【讨论】：