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

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>

等等

欢迎来到这个很棒的网站！

同一文件夹中有一个“about.html”文件（以及所有其他必要的文件）。同样，代码的功能与预期不同。

将屏幕上的更改为

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

说明：

您之前所做的是在单击时将单击事件附加到链接。这意味着，当您第一次单击时，它会启用链接，以便在下次单击时加载您的内容，因此仅在第二次单击时有效。

将屏幕上的更改为

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

说明：

---

您之前所做的是在单击时将单击事件附加到链接。这意味着，当您第一次单击时，它将启用链接，以便在下次单击时加载您的内容，从而仅在第二次单击时工作。

第一次单击在屏幕上执行，这将加载功能与单击事件相关联。 因此，第二次单击时将触发加载功能

编辑

解决方法是删除

标记上的

onclick

属性

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})

---

屏幕上第一次单击执行，它将加载功能与单击事件关联。 因此，第二次单击时将触发加载功能

编辑

解决方法是删除

标记上的

onclick

属性

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})

---

你只是有一些多余的代码。您附加了两个单击事件

使用

onClick

属性内联到标记中

在带有

的
屏幕上（）
函数中，单击（）

只有在单击链接后，才会创建实际的

.click（）

处理程序。因此，您必须单击一次以创建处理程序，然后第二次单击将触发回调函数

您可以删除

。单击（）

，并将代码保留在该函数中。因此，您的

屏幕（）

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


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

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

这假设您提供的所有
都是首选的，因为jQuery 1.7+
只是有一些冗余代码。您附加了两个单击事件

使用
onClick
属性内联到标记中
在带有
的
屏幕上（）
函数中，单击（）

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

您可以删除
。单击（）
，并将代码保留在该函数中。因此，您的
屏幕（）

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


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

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

这假设您给出了所有的
都是首选的，因为jQuery 1.7+
在使用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>


欢迎来到这个很棒的网站

​
$（函数（）{
$（“a.viewer”）。单击（函数（）{
警报（$（this.attr（'id'）+'.html'）；
$（“div#viewer”）.load（this.id+'.html'）
});  
})​;

鉴于您正在使用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>


欢迎来到这个很棒的网站

​
$（函数（）{
$（“a.viewer”）。单击（函数（）{
警报（$（this.attr（'id'）+'.html'）；
$（“div#viewer”）.load（this.id+'.html'）
});  
})​;

试试看

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

试一试

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

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

Facebook也有类似的解决方案，尽管它们使用rel=“ajaxify”属性，但原理完全相同

（下一步：使用某种历史api使URL跟随用户导航）
嗯。。。首先，这不是最好的解决方案。更好的解决方案是：

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

Facebook也有类似的解决方案，尽管它们使用rel=“ajaxify”属性，但原理完全相同

（下一步：使用某种历史api使URL跟随用户导航）
在您的fiddle示例中，您使用jQuery 1.7-为什么不转到
.on（）
函数？@Lix re:
on
您是对的。re：分号，这里不需要。仅仅因为你能控制他们并不意味着你应该这样做。我相信一个人应该与他们的代码风格保持一致。我相信我写的答案非常快，因为缺少
没有效果这没什么大不了的。如果答案冒犯了您，请随意编辑并添加。在您的小提琴示例中，您使用jQuery 1.7-为什么不转到
.on（）
函数？@Lix re:
on
您是对的。re：分号，这里不需要。仅仅因为你能控制他们并不意味着你应该这样做。我相信一个人应该与他们的代码风格保持一致。我相信我写的答案非常快，因为缺少
没有效果这没什么大不了的。请随意编辑答案，如果它冒犯了你，请添加。是的，这非常准确地解释了问题。那么解决方案呢？：）没错，我只回答了问题的第一部分，编辑汉克斯！我今天要试一试！成功了！非常感谢你。至于为什么，我的第一次点击加载了第二次点击功能，是吗？是的，差不多。实际上，在代码中，每次单击都会调用屏幕上的
函数，这会将加载程序函数添加到onClick事件处理程序中。那么什么时候