jquery ajax更改div内容答案

【问题标题】：jquery ajax change div contentjquery ajax更改div内容
【发布时间】：2013-09-01 03:11:15
【问题描述】：

我有一个页面，其中有一个 div 和一个 id 居中的菜单。当页面第一次加载时，它在 div 中有一个包含 10 个选项的菜单。这些选项中的每一个都有一个不同的命名 ID，例如 menu2、menu3 等，并带有一个空白的 href 链接。在初始加载时，我可以更改为任何菜单，一旦完成，我将无法选择任何其他菜单并使用新菜单再次更改 div 的内容

我的脚本是

<script type="text/javascript">
    $(document).ready(function(){
       $("#menu2").click(function(){
        $('#centeredmenu').load('menu2.php');
       }); 
       $("#menu3").click(function(){
        $('#centeredmenu').load('menu3.php');
       });
       $("#menu4").click(function(){
        $('#centeredmenu').load('menu4.php');
       });
       $("#menu5").click(function(){
        $('#centeredmenu').load('menu5.php');
       });
       $("#menu6").click(function(){
        $('#centeredmenu').load('menu6.php');
       });
       $("#menu7").click(function(){
        $('#centeredmenu').load('menu7.php');
       });
       $("#menu8").click(function(){
        $('#centeredmenu').load('menu8.php');
       });
       $("#menu9").click(function(){
        $('#centeredmenu').load('menu9.php');
       });
       $("#menu10").click(function(){
        $('#centeredmenu').load('menu10.php');
       });
       $("#menu11").click(function(){
        $('#centeredmenu').load('menu11.php');
       });
     });
</script>

所以我首先加载页面并选择说 menu3，然后加载 menu3 正常，所有后续菜单都不会加载，除非我刷新页面并再次返回开始并选择我想要的其他菜单。非常感谢您的帮助 P

【问题讨论】：

你能设置一个小提琴吗？您是否在控制台中遇到任何错误？
@haz0rd 把我弄丢了，哈哈
@haz0rd 几乎就像 jquery 不工作一样。通常你不会看到我在初始更改菜单时没有看到的页面刷新。当我选择后续菜单时，您确实看到页面尝试重新加载，这不应该发生
jfiddle 是一种让我们准确了解您正在使用什么并能够重现您的问题的方式。如果页面正在加载听起来你可能有一些标签你也在设置这个？你应该确保用# like adeneo 来取消他们的href

标签： jquery ajax hyperlink onclick

【解决方案1】：

您可能在加载新内容时覆盖了菜单，因此您需要一个委托事件处理程序：

$('#centeredmenu').on('click', '[id^="menu"]', function(e) {
    e.preventDefault();
    $('#centeredmenu').load(this.id + '.php');
});

此外，带有空href 的元素会重新加载页面，您应该在href 中使用# 登录并阻止事件处理程序中的默认操作。

【讨论】：

非常感谢大家，我在hrefs上使用#，事件处理程序使用上面的sn-p解决了这个问题:)