Question

我有一个页面加载内容。

这是由 page_ONE.php

生成的已恢复HTML代码

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(document).on('click', "#contentarea_ONE a", function(ev) { 
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
            $('#contentarea_ONE').load($(this).attr('href'));
            return false;
    });
    });
</script>
<div id="contentarea_ONE">
</div>
</body>

我为 page_TWO.php 和 page_THREE.php 提供了几乎相同的代码，只需更改一个对应的TWO或THREE。

我在每个页面都有按钮，允许我在#contentarea_ONE 中加载 page_TWO.php，在#contentarea_TWO 中加载 page_THREE.php。

Firebug将此显示为导航器内存中的HTML：

<body> <script type="text/javascript"> $(document).ready(function() { $(document).on('click', "#contentarea_ONE a", function(ev) { ev.preventDefault(); ev.stopPropagation(); ev.stopImmediatePropagation(); $('#contentarea_ONE').load($(this).attr('href')); return false; }); }); </script> <div id="contentarea_ONE"> <div id="contentarea_TWO"> <div id="contentarea_THREE"> </div> </div> </div> </body>

嗯，这就是问题所在：当我以嵌套的方式加载三个页面时，当我点击链接时，如<a href="xxx/yyy"> 里面的div #contentarea_THREE ，虽然我希望内容在contentarea_THREE中加载，但内容会加载到div #contentarea_TWO 中。

为什么会这样？

Answer 1

你可以试试这个：

$(document).ready(function() {
    $(document).on('click', '[id^="contentarea_"] a', function(ev) { 
        ev.preventDefault();
        ev.stopPropagation();
        $(this).closest('[id^="contentarea_"]').load($(this).attr('href'));
    });
});

首先看看你所有的div都以相同的id首字母开头，或者我可能会说他们有contentarea_的共同点。所以尝试使用attr选择器，当你点击这个div中的链接然后尝试找出具有相同id首字母$(this).closest('[id^="contentarea_"]')的最近的div并执行加载。

jQuery事件单击嵌套的div

1 个答案: