1

我有一个页面可以动态加载内容。

这是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代码，只需将一个更改为两个或三个对应的位置。

我在每个页面中都有按钮，允许我在 #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 内。

为什么会出现这种情况？

4

1 回答 1

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 首字母的 div$(this).closest('[id^="contentarea_"]')并执行加载。

于 2013-03-25T10:57:16.777 回答