У меня есть два запроса на получение ajax в моем файле JS.Я не могу предотвратить поведение по умолчанию во втором запросе

Question

Мой первый вызов ajax работает нормально - предотвращает поведение ссылки по умолчанию.Это получает данные JSON и создает несколько новых ссылок с динамически генерируемыми именами классов.

Мой второй вызов ajax для события click для динамически создаваемых ссылок.Я не могу предотвратить поведение по умолчанию на этом.Он просто перенаправляет на URL с данными JSON.В приведенном ниже коде он никогда не попадает в отладчик.

Я почти уверен, что это происходит, потому что вновь созданные ссылки не являются частью DOM.

Может кто-нибудь помочь мне разобратьсячто происходит?

$(function(){
    $("#load_projects").on("click", function(e){
        $.ajax({
            method: "GET",
            url: this.href
        }).done(function(response){
            let $userProjects = $("#user_projects")
            $userProjects.html("")
            response.forEach(function(item){
                let project = new Project(item);
                let materials = project.materials


                let url = `/users/${project.user_id}/projects/${project.id}`
                $userProjects.append(`<div id=${project.id}>` + "<li>" + project.formatIntro() + "<br>" + "<a href="+url+" class='full_project'>See Full Project</a>"  + "<br>" + "Materials Required:" + "<br>" + `<ul class=${project.id}></ul>` + "</li>" + "</div>")

                materials.forEach(function(mat){
                    $(`.${project.id}`).append("<li>" + mat.material_name + "</li>")
                });                
            });
        });
        e.preventDefault();
    });
});

$(function(){
    $(".full_project").on("click", function(e){
        $.ajax({
            method: "GET",
            url: this.href           
        }).done(function(response){
           response.forEach(function(item){
               debugger
           })


        });
        e.preventDefault();
    });

});

Answer 1

Я понял это.Событие click вызывалось для элементов в DOM, которых не было.Мне нужно было привязать его к телу.

$ (function () {

$("body").on("click", ".full_project", function(e){
    e.preventDefault();

    $.ajax({
        method: "GET",
        url: this.href           
    }).done(function(response){
      let project = new Project(response);
      let $projectDiv = $(`#${project.id}`)
      $projectDiv.html("")


    });

});

});