【发布时间】：2021-04-18 05:50:39
【问题描述】：
我是 jquery 和 javascript 的新手，所以这可能是一个非常简单的问题。我收到一个我无法理解的错误，每次在我的 .js 文件中运行函数时都会出现该错误。
目前，我的 .js 文件只是将其作为查找问题所在的一种方式：
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(){
var check = "I work";
alert(check);
});
});
标题链接更改颜色没有任何问题，因此 .js 文件位于我的 HTML 文件中。我在脚本标签的 HTML 文件中也有我的 jquery 的最新 CDN。 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
当我在浏览器上单击带有 title-link 类的元素时，页面只是重新加载 - 或崩溃（？），这是怎么发生的？检查页面时，我看到它从我的 .js 文件切换到 jquery.min.js:formatted 在传递我的函数中的每一行并指向下面的这些行之后：
while ((o = i.handlers[n++]) && !u.isImmediatePropagationStopped())
u.rnamespace && !1 !== o.namespace && !u.rnamespace.test(o.namespace) || (u.handleObj = o,
u.data = o.data,
void 0 !== (r = ((S.event.special[o.origType] || {}).handle || o.handler).apply(i.elem, s)) && !1 === (u.result = r) && (u.preventDefault(),
u.stopPropagation()))
}
return c.postDispatch && c.postDispatch.call(this, u),
u.result
为什么会发生这种情况，我该怎么做才能让我的代码按预期运行？ ATM 由于每次使用函数时页面都会重新加载，我无法使用我的 javascript 文件。非常感谢您的帮助
编辑：这是 HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/tentaJs.js"></script>
<link rel="stylesheet" href="./css/main.css">
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: <a href="" class = "title-link">titel</a> </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
<a href="tel:00000000">Tele: 00000000</a></p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
<a href="tel:00000000">Tele: 00000000</a></p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
<a href="tel:00000000">Tele: 00000000</a></p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info@kil.se <br>
<a href="tel:00000000">Tele: 00000000</a></p>
</footer>
</div>
</body>
</html>
【问题讨论】：
-
发布整个代码或sn-p
-
来自什么？ HTML？
-
您发布的 HTML 标记没有任何
title-link类元素。 -
现在它有了正确的 HTML！
-
您的页面正在重新加载，因为该元素是一个超链接。如果您不想要标准行为 - 离开 - 您需要阻止它：How to stop default link click behavior with jQuery
标签： javascript html jquery