Question

我有一个带有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

Answer 1

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

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

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

jquery ajax改变div内容

1 个答案: