Question

JQuery + HTML + CSS

我正在尝试获取导航栏上的链接以更新我拥有的“div”标签。我得到了它的工作，但我必须先点击每个超链接两次，然后才能在主浏览器上加载页面。为什么？如何在一次点击后如何加载？

test.js：

function onScreen(id){
    $("a#" + id).click(function(){$("div#viewer").load(id + '.html')});  
}

main.html中：

<a href="#" id="about" onclick="onScreen('about')">About Us</a>
<a href="#" id="account" onclick="onScreen('account')">My Account</a>

等

<div class ="article" id="viewer">
    <p>welcome to this awesome site! </div>

在同一文件夹中有一个“about.html”文件（和所有其他必要文件）。同样，代码功能，只是不应该如此。

Answer 1

第一次单击执行onScreen，它将加载功能与click事件相关联。因此，第二次单击时会触发加载功能。

修改

解决方案可能是删除onclick代码
上的<a href=#>属性
$(function(){ $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')}); })

Answer 2

将屏幕更改为

function onScreen(id){
   $("div#viewer").load(id + '.html'); 
}

<强>解释

您在点击时将点击事件附加到链接之前所做的事情。这意味着当您第一次点击时，它启用了链接以加载您的内容以供下次点击，因此仅在第二次工作。

Answer 3

你只需要一些冗余代码。您附加了两个点击事件。

使用onClick属性标记内联。
onScreen()函数.click()。

只有在您单击链接后才会创建实际的.click()处理程序。因此，您必须单击一次以创建处理程序，然后第二次单击将触发回调函数。

您可以删除.click()并将代码保留在该功能中。所以你的onScreen()函数看起来像这样 -

function onScreen(id){
  $("div#viewer").load(id + '.html');
}

您还可以使用此语法改进代码 -

$('a.internalLink').on('click',function(
  $("div#viewer").load($(this).id + '.html');
));

这假设您将所有您想要表现的<a>代码设为internalLink的类属性。更容易为类似元素提供相同的类名，以便您可以使用jQuery选择器轻松地对它们进行分组。

自jQuery 1.7 +

.on() function

Answer 4

嗯...首先，这不是最好的解决方案。一个更好的解决方案是：

<a href="about.html" class="scriptable" id="about">About Us</a>
<a href="account.html" class="scriptable" id="account">My Account</a>

和

$(document).ready(function(){
     function displayScreen(screenname){
         var url_to_load = screenname + '.html';
         $('#viewer').load(url_to_load);

     }
     $('.scriptable').live("click", function(ev){
         var screenname = $(this).attr('id');
         displayScreen(screenname);
         ev.preventDefault();
     });
});

Facebook做了类似的解决方案，尽管他们使用rel =“ajaxify”属性，但原则完全相同。

（下一步：使用某种历史API来使URL跟随用户导航）

Answer 5

看到你正在使用jQuery，抛弃内联onclick并绑定。这使您的代码更清晰，更易于理解和修改

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
<div class ="article" id="viewer">
    <p>welcome to this awesome site!</p>
</div>
<script>
$(function(){
    $("a.viewer").click(function(){
        alert($(this).attr('id') + '.html');
        $("div#viewer").load(this.id + '.html')
    });  
});
</script>

Working JSFiddle

Answer 6

尝试

$(document).ready(function(){
  $("a").click(function(){
    $("div#viewer").load(this.id + '.html')
  });
});

第一次单击时不加载JQuery / HTML链接

6 个答案: