Fatal编程技术网
  • jquery/
  • jQuery事件在嵌套div中单击

jQuery事件在嵌套div中单击

jquery

jQuery事件在嵌套div中单击,jquery,javascript-events,Jquery,Javascript Events,我有一个页面，可以自动加载内容 这是由page_ONE.php生成的恢复的HTML代码 <body> <script type="text/javascript"> $(document).ready(function() { $(document).on('click', "#contentarea_ONE a", function(ev) { ev.preventDefault(); ev.stopPr

我有一个页面，可以自动加载内容

这是由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>


$（文档）.ready（函数（）{
$（文档）。在（'click'），“#contentarea_ONE a”，函数（ev）{
ev.preventDefault（）；
ev.stopPropagation（）；
ev.立即停止传播（）；
$（'#contentarea_ONE'）.load（$（this.attr（'href'））；
返回false；
});
});
我对page_TWO.php和page_TWO.php有几乎相同的代码，只是在相应的位置将一个代码更改为两个或三个

我在每个页面上都有按钮，允许我加载page_TWO.php in#contentarea_ONE，以及page_TWO.php in#contentarea_TWO

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>


$（文档）.ready（函数（）{
$（文档）。在（'click'），“#contentarea_ONE a”，函数（ev）{
ev.preventDefault（）；
ev.stopPropagation（）；
ev.立即停止传播（）；
$（'#contentarea_ONE'）.load（$（this.attr（'href'））；
返回false；
});
});
好吧，这就是问题所在：当我以这种嵌套方式加载三个页面时，当我单击div#contentarea_three内部的链接时，
，尽管我希望内容加载在contentarea_three内，但内容加载在div#contentarea_three内

为什么会这样
 您可以尝试以下方法：


$(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”]”）并执行加载。
您可以尝试以下操作：


$(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”]'）
，并执行加载。
我认为您的javascript没有加载到包含的文件中。尝试将第二页中的点击事件处理程序替换为警报，我怀疑调用的是第一页中的函数而不是第二页？您应该尝试使用最近的contentarea“我在每个页面中都有按钮，允许我在contentarea内加载page_two.php，在contentarea内加载page_two.php，在contentarea内加载page_two.php。”这是否正确，或者你是说
page\u TWO.php
进入
\contentarea\u TWO
和
page\u TWO.php
进入
\contentarea\u TWO
？就像我写的一样。。。页面在div contentarea\u ONE内加载两次。不管怎样，别担心。Jai的解决方案解决了这个问题。谢谢您的时间。我认为您的javascript没有加载到包含的文件中。尝试将第二页中的点击事件处理程序替换为警报，我怀疑调用的是第一页中的函数而不是第二页？您应该尝试使用最近的contentarea“我在每个页面中都有按钮，允许我在contentarea内加载page_two.php，在contentarea内加载page_two.php，在contentarea内加载page_two.php。”这是否正确，或者你是说
page\u TWO.php
进入
\contentarea\u TWO
和
page\u TWO.php
进入
\contentarea\u TWO
？就像我写的一样。。。页面在div contentarea\u ONE内加载两次。不管怎样，别担心。Jai的解决方案解决了这个问题。谢谢你的时间。你可能想考虑一下做些什么，为什么会帮助他们。一般说来，代码本身并不是很有教育意义。@安东尼格雷斯特：是的，我刚发布的时候，我的系统就不在了。“马里奥斯福德感谢和高兴这对你有帮助。你可能想考虑解释它做了什么以及为什么会帮助它。”一般来说，代码本身并不是很有教育意义。@AnthonyGrist是的，当我发布它的时候，我刚刚从我的系统中出来。@Mariosfall谢谢，很高兴这对你有所帮助。