href 属性中 jQuery 代码的奇怪行为答案

【问题标题】：Strange behavior of jQuery code in the href attributehref 属性中 jQuery 代码的奇怪行为
【发布时间】：2017-02-23 17:10:48
【问题描述】：

我看到可以将jquery代码放在html a标签的href属性中。

但是，该代码有效，所以我不明白：它在第二次单击后有效。为什么？

<a href="javascript:alert('ok JavaScript')">JS</a>
<br>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<a id="myId" href='javascript:
  $(document).ready(function(){
    $("#myId").click(function() {
      alert("ok jQuery");
    });
  });'>jQ</a>

【问题讨论】：

虽然可以在 href 中添加 JS 代码，但您真的，真的不应该
@Rory，我需要一个只使用我的书签...
当 dom 准备好执行 js 代码时调用一次文档就绪函数。在您的代码中，您正在手动单击并执行您的 javascript，因此首先它正在调用文档就绪函数，等待 myId click 函数调用。

标签： javascript jquery html href

【解决方案1】：

在第一次单击中，href 属性中的函数被执行，并且处理程序被绑定到“myId”锚元素。在第二次点击处理程序被执行并显示警报。

【讨论】：

【解决方案2】：

这种行为没有什么奇怪的。
开头没有绑定到您的链接的 jQuery click 处理程序。

但是，当你第一次点击它时，它会从它的href 执行以下脚本：

$(document).ready(function() { 
  $("#myId").click(function() {
    alert("ok jQuery");
  });
});

并将处理程序绑定到您的链接。因此，在第一次单击后，您没有 alert，但您现在有一个绑定到您的 #myId 的 click 处理程序。

当您第二次单击它时，它会触发新绑定的 jQuery 事件，该事件会显示警报。
此外，它再次执行href，因此当您再次单击此链接时，您将获得两个（相同的）单击处理程序和两个警报，并且每次警报的数量都会增加。

【讨论】：

【解决方案3】：

第一次单击定义了单击事件以显示警告框。

第二次点击执行代码并显示警告框。

作为评论，您不应将此代码包含在 href 属性中，因为这是一种不好的做法。

【讨论】：