为 HTML 链接调用 JavaScript 函数答案

【问题标题】：Calling JavaScript function for HTML link为 HTML 链接调用 JavaScript 函数
【发布时间】：2013-05-22 16:32:33
【问题描述】：

我正在尝试使用 JQuery，以便当用户单击 HTML 链接时，会调用我在 JavaScript 文件中编写的函数。

<a href="#" id="advanced_options">Show advanced options</a>

和

$(document).ready(function() {

  $("#advanced_options").click(function() {
    alert('hello');
  });

});

当我点击链接时，它不会发出警报，而是跳转到另一个链接。这是为什么呢？

【问题讨论】：

你在加载 jQuery 吗？检查你的 JS 控制台。
是的，我的控制台说我正在加载 jQuery。
如果您不希望链接链接到页面顶部，请不要说href="#"。如果您想要一个仅使用 JS 执行某些操作的按钮，并且不想链接到任何内容，请使用实际按钮而不是链接。
在我的控制台中，在$(document).ready(function() 上显示Uncaught Type Error: Object #<HTMLDocument> has no method 'ready'。但是jquery.min.js 显然已加载。怎么回事？
顺便说一下，JQuery是从：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>加载的

标签： javascript jquery

【解决方案1】：

如果您通过 ajax 查询加载链接，因此在页面初始加载期间它不在页面上，请使用 jQuery on 函数：http://api.jquery.com/on/

$(document).ready(function() {

  $(document).on( 'click' , "#advanced_options" , function(event) {
    event.preventDefault();
    alert('hello');
  });

});

【讨论】：

【解决方案2】：

您必须阻止默认浏览器行为：

$(document).ready(function() {

  $("#advanced_options").click(function(event) {
    event.preventDefault();
    alert('hello');
  });

});

【讨论】：