Jquery results in error every time function is used

Question

I'm new at jquery and javascript so this might be a very simple question. I get an error that I cannot understand and it comes up every time a function is runned in my .js-file.

At the moment my .js-file simply has this as a way to find what the problem is:

    $(document).ready(function(){
    $(".title-link").css("color", "#ccc");

    $('.title-link').click(function(){
    var check = "I work";
    alert(check);
    
    });

   });

The title-link changed color without any problem, so the .js-file is located by my HTML-file. I also have the latest CDN for my jquery in the HTML-file in script-tags. src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"

How does it come that when I click an element with title-link class on my browser, the page just reloads - or crashes(?)? When inspecting the page, I see it switch from my .js-file to jquery.min.js:formatted after passing each row in my function and points to these rows below:

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

Why does this happen and what can I do to have my code run as intended? ATM I cannot use my javascript file due to the page reloading everytime a function has been used. Many thanks for any help

EDIT: this is the HTML-page

<!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>

The HTML markup you posted doesn't have any element with the class `title-link`. — emerson.marini, Jan 13 '21 at 08:55
Your page is reloading because that element is a hyperlink. If you don't want the standard behavior - navigate away - you need to prevent it: [How to stop default link click behavior with jQuery](https://stackoverflow.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery) — emerson.marini, Jan 13 '21 at 09:05

score 0 · Answer 1 · answered Jan 13 '21 at 10:54

 $(document).ready(function(){
    $(".title-link").css("color", "#ccc");

    $('.title-link').click(function(e){
    e.preventDefault();
    var check = "I work";
    alert(check);
    
    });

   });

<!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>

<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>

Jquery results in error every time function is used

1 Answers1