Question

我做了一个简单的网站，我有2个功能，在一个页面中加载我的页面，问题是当我加载一个它工作正常但是当我点击另一个相同的页面加载是不可能使用这个那种功能？这是代码

$('#firstcontent1').click(function(){
            $('#content1').load('pages/firstcontent1.php');
        });
$('#firstcontent2').click(function(){
            $('#content1').load('pages/firstcontent2.php');
        });
$('#firstcontent3').click(function(){
            $('#content1').load('pages/firstcontent3.php');
        });

这是HTML

<div id="content1">

    </div>
    <div >
            <ul id="menu-list">
                <li id="firstcontent1"><a href="#">firstcontent1</a>
                </li>
                <li id="firstcontent2"><a href="#">firstcontent2</a>
                </li>
                <li id="firstcontent3"><a href="#">firstcontent3</a>
                </li>
            </ul>
        </div>

另一个是

$('#secondcontent1').click(function(){
            $('#content2').load('page/secondcontent1.php');
        });
$('#secondcontent2').click(function(){
            $('#content2').load('page/secondcontent2.php');
        });
$('#secondcontent3').click(function(){
            $('#content2').load('page/secondcontent3.php');
        });

这是HTML

<div >
            <ul id="menu-list">
                <li id="secondcontent1"><a href="#">secondcontent1</a>
                </li>
                <li id="secondcontent2"><a href="#">secondcontent2</a>
                </li>
                <li id="secondcontent3"><a href="#">secondcontent3</a>
                </li>
            </ul>
        </div>
        <div id="content2" >

        </div>

你可以看到id是不同的，页面名称和容器不同，但是例如我加载/点击pages1的id，content1将加载pages1，content2也会加载page1 ..我想的时候我点击id pages1 content1将加载pages1但content2将不会加载page1，因为我没有点击page1的id。

更新

我注意到这只有content1被加载到content2中，例如当我点击id pages1 content1而content2将加载pages1但是当我点击pages2时，只有content2会加载而content1保持不变意味着正确的页面

Answer 1

所以你的问题可能来自一个错字。您正在尝试加载路径page/content和pages/content。不确定这只是一个粘贴错误，但我想我会指出这一点。此外，它可能无法正常工作，因为您使用相同的id两次 - menu-list。相反，使用一个类。

在任何情况下，您可以将所有这些功能合并为1，而不是拥有6种不同的功能，然后现在您可以缩小问题范围，如果还有的话。

如果您没有将<a>标记链接到任何标记，也不需要它。相反，您使用jQuery事件处理程序捕获该单击。

这可能是HTML格式：

<div id="content1"></div>
<div>
    <ul class="menu-list" data="content1">
        <li id="firstcontent1">firstcontent1</li>
            .
            .
            .
    </ul>
</div>

<div id="content2"></div>
<div>
    <ul class="menu-list" data="content2">
        <li id="secondcontent1">secondcontent1</li>
            .
            .
            .
    </ul>
</div>

接下来，您的整合jQuery应如下所示：

$(document).ready(function(){
    $('.menu-list li').click(function(){
        var content = "#" + $(this).parent().data();
        var page = "pages/" + $(this).attr('id') + ".php";

        $(content).load(page);
    });
});

如果你使用的是jQuery POST 1.7版，你的功能应该是这样的：

$(document).on('click', '.menu-list li', function(){
    var content = "#" + $(this).parent().data();
    var page = "pages/" + $(this).attr('id') + ".php";

    $(content).load(page);
});

现在您拥有菜单列表的通用功能，您只需遵循HTML语法即可。作为一般的编程规则，如果你经常重复自己，你可能会做错事，或者可能做得更好。

编辑::

您的问题可能来自于在最后一个页面完全加载之前尝试加载页面。

当您尝试这样的事情时会发生什么：

$(document).ready(function(){
    $('.menu-list li').click(function(){
        var content = "#" + $(this).parent().data();
        var page = "pages/" + $(this).attr('id') + ".php";

        $(content).load(function(){
            $(this).load(page);
        });
    });
});

Answer 2

以下是一个示例：FIDDLE
与您的代码相同。这很有效。

我在评论中提到了一个拼写错误。你的代码很好，否则就行了。

<强>错字：

page vs pages。另外，请确保您的相对路径适用于两个页面。

Answer 3

是否嵌套了pages1和page1，如果是这样，事件句柄将在两个事件中冒泡。你能尝试一下吗？ $('#page1').click(function(event){ event.preventDefault(); $('#content2').load('page/page1.php'); });

Answer 4

尝试使用实时绑定：

$('#menu-list').on('click', '#firstcontent1', function(){
    $('#content1').load('pages/firstcontent1.php');
});

告诉我们接下来发生了什么。 = d

Answer 5

尝试更改所有这些：

$('#secondcontent1').click(function(){
        $('#content2').load('page/secondcontent1.php');
});

对于这样的事情：

$('#secondcontent1').click(function(event){
         event.stopPropagation();
        $('#content2').load('page/secondcontent1.php');
});

将event.stopPropagation（）添加到每个click事件，并记住将function（）更改为function（event）。

Answer 6

我想你想要这样的代码

<div id="content1">

</div>
<div >
    <ul class="menu-list">
       <li id="firstcontent1"><a href="#">firstcontent1</a>
       </li>
        <li id="firstcontent2"><a href="#">firstcontent2</a>
        </li>
        <li id="firstcontent3"><a href="#">firstcontent3</a>
        </li>
   </ul>
</div>
<div >
        <ul class="menu-list">
            <li id="secondcontent1"><a href="#">secondcontent1</a>
            </li>
            <li id="secondcontent2"><a href="#">secondcontent2</a>
            </li>
            <li id="secondcontent3"><a href="#">secondcontent3</a>
            </li>
        </ul>
</div>

然后你想要这样的剧本

$('.menu-list li').unbind('click').click(function(){
  var id=$(this).attr('id');
  var page='pages/'+id+'.php';
  $('#content1').load(page);
});

Answer 7

这似乎是缓存问题。

尝试使用JQuery .ajax，并为每个请求设置不缓存：

$.ajax({
    url:"pages/firstcontent1.php",success:function(result){
    $("#content1").html(result);
    },
    cache: false
});

为了查看它是否是缓存问题/每次点击多次请求 - 运行Fiddler并查看正在发送的确切请求 - 点击。

如果您发现每次点击有多个请求 - 这意味着您要创建多个请求而不是单个请求 - 需要通过＆＃34; Delegate＆＃34进行修复; ＆安培; ＆＃34; event.stopPropagation()＆＃34;
如果您每次点击看到1个请求 - 再次点击，看看Fiddler中的响应状态是304还是您根本看不到第二个请求 - 如果是这样的话 - 使用上面的解决方案;或者你可以通过＆＃34; .load＆＃34;获得免费缓存。通过
```
$.ajaxSetup ({
    cache: false
});
```

两个js函数加载在一个页面中

7 个答案: