1

在我使用引导程序的代码中，我遇到了一个问题。

我正在使用如下所示的 JS 代码。

 $( "li:eq(1)" ).click(function() {
            $.get("./test.php")
               .done(function(data) {
                    $('#middle').html(data);
            });

就是控制div。

<div class="container" id=header-nav>
            <a class="brand" href="index.php"></a>
            <div class="nav-collapse collapse" >
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="test.php">test</a></li>
.......
<div class="container" id="middle"> </div>

当我单击测试按钮时，链接将变为test.php#但没有任何变化。再次点击，它可以加载到test.php.

问题是链接是test.php，代码不起作用。时test.php#，它工作。我想知道为什么。

非常感谢。

4

2 回答 2

2

问题是因为您已将处理程序附加到li元素，但是a单击了元素，然后转移了页面。试试这个：

$("li:eq(1) a").click(function(e) {
    e.preventDefault();
    $.get("./test.php")
        .done(function(data) {
            $('#middle').html(data);
        });
});

停止链接的preventDefault()默认行为，这意味着您的 AJAX 请求将根据需要执行。

于 2013-08-19T09:46:55.120 回答
0

由于您想使用$.get（AJAX），因此您不必将 url 提供给<a>元素内的<li>元素，

你必须给元素href内部的属性这个值：或者，<a>javascript:void(0)#

你的html代码是：

<div class="container" id=header-nav>
            <a class="brand" href="index.php"></a>
            <div class="nav-collapse collapse" >
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">test</a></li>
.......
<div class="container" id="middle"> </div>

或者您必须通过添加来阻止元素的默认操作以防止重新加载url： event.preventDefault()在您onclick的事件中，您的js代码将是：

$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
            $.get("./test.php")
               .done(function(data) {
                    $('#middle').html(data);
            });
于 2013-08-19T09:49:14.023 回答