event.preventdefault() doesn't work in some places

Question

Ahoy! I am writing a small json based database website as a school project. I am having the following problem with my code.

I want to make a link on the page that loads new content without refreshing the page. To serve this process i am using <a> tags with the jquery code to prevent the links from refreshing the page as shown below:

$("#sorter").click(function (e) {
    e.preventDefault();
    name = look_for_index($("#artist_input").val(), artist_lite_dict, "name");
    global.load_artist();
});

In the case above this works, However in the case below this it just refuses to work at all and i have no idea why. i have tried getting everyone i know who knows Js to help me but people just leave confused. "code below":

$(".art").click(function(e){
    console.log("CLICK");
    e.preventDefault();
    name = this.parent().sibling(".title").val()
    title = this.children(span).val();
    look_for_index(name, artist_full_dict, "name")
    global.print_art(title);
});

And the HTML that relates to this code is generated in javascript but here are the template objects if the bug is html related:

const art_list_template = ({
    title,
    date,
    index
}) => `
<li class="${title} article art">
    <a href="" class="art">
        <span class="title art">
           ${title}
        </span>
        <p>
            Date: ${date}, Index: ${index}
        </p>
    </a>
</li>
`

link to the whole project on github: https://github.com/Stephan-kashkarov/Collector

-Thanks!, Stephan

Answer 1

.preventDefault needs to be called on the argument of the function it's in. Eg instead of

function (e) {
  event.preventDefault();

you should do

function (e) {
  e.preventDefault();

If event is the argument name, use event, but often it's something else. When you run into errors, check your console to see what it says - it should have given you an error, something like event is not defined when you had that code.