0

我有以下 jquery 脚本：

$(function(){   
$('#top-menu').on('click', 'a.change-menu', function(e){   
e.preventDefault()   
$("#menu-change-div").load($(this).attr("href"));   

});  
}); 

$(function(){   
$('#menu-change-div').on('click', 'a.change-content', function(e){     
e.preventDefault()   
$("#content").load($(this).attr("href"));     
});  
});

这是正文中的 HTML：

<div id="menu-div">
<div id="top-menu">
<h3 id="top-tabs"><a href="contentColumn.html" class="change-menu">Contents</a></h3>
<h3 id="top-tabs"><a href="indexColumn.html" class="change-menu">Index</a></h3>
<h3 id="top-tabs"><a href="searchColumn.html" class="change-menu">Search</a></h3>
</div>
<div id="menu-change-div">
<ul>
//Lots of nested list items and ul's with #change-content id
</ul>
</div>
</div>

<div id="content">
<div id = "page-content">
//content section
</div>
</div>

第一个功能发生在我单击菜单 div 中的列表项并将 html 文件加载到我的内容 div 中时。

选择其他选项卡时，第二个更改了我的菜单div中的内容。

我可以单击列表项，一切都按预期工作，当我单击选项卡时，它也可以正常工作。如果我首先单击一个列表项，然后单击一个选项卡，然后单击另一个列表项，则会出现我的问题。它不像第一次单击时那样将 html 加载到 div 中，而是跟随 href 并在另一个窗口中打开它。任何想法我做错了什么？

4

3 回答 3

3

尝试：

$(function() {
    $('body').on('click', 'a.change-content', function(e) {
        e.preventDefault()
        $("#content").load($(this).attr("href"));
        return false;
    });
    $('body').on('click', 'a.change-menu', function(e) {
        e.preventDefault()
        $("#menu-change-div").load($(this).attr("href"));
    });
});​

如果元素是动态添加的，那么您需要更改使用 .on() 的方式。

根据文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

另请注意，您可以将两者合二为一$(function () {...})。

于 2012-06-11T21:00:37.857 回答
1

选择其他选项卡时，第二个更改了我的菜单div中的内容。

然后您可能需要将您的第二个click事件处理程序委托给将留在 DOM 中的祖先元素。您可以通过将选择器传递给on方法来做到这一点：

$("#someAncestor").on("click", "a.change-menu", function(e) {
    //Do stuff
});

这是因为当您更改 引用a.change-menu的元素时，绑定事件处理程序的元素不再存在（新元素不会自动获取绑定到它们的事件处理程序）。

通过将事件处理程序委托给 DOM 树的更高层，您可以利用大多数 DOM 事件在树上冒泡的事实，并在祖先元素上侦听该事件。如果事件目标与传递给的选择器匹配on，则执行事件处理程序。

于 2012-06-11T20:59:05.300 回答
0

.on() 方法正在侦听已经存在的 DOM 元素。如果添加一些新元素，它们将不会被监听。如果您需要监听这些元素，即使它们是后来添加的（例如使用 .load() ），请使用 .live() 方法。

于 2012-06-11T20:59:31.900 回答