时间戳

首页 > 解决方案 > 我的 js 文件中有两个 ajax 获取请求。我无法阻止第二个请求中的默认行为

ruby-on-rails - 我的 js 文件中有两个 ajax 获取请求。我无法阻止第二个请求中的默认行为

问题描述

我的第一个 ajax 调用工作正常 - 防止链接的默认行为。这将获取 json 数据并使用动态生成的类名创建一些新链接。

我的第二个 ajax 调用是针对动态创建的链接上的单击事件。我无法阻止这个默认行为。它只是重定向到带有 json 数据的 url。在下面的代码中，它永远不会命中调试器。

我很确定这是因为新创建的链接不是 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();
    });

});

标签： ruby-on-railsjsonajax

解决方案

我想到了。在 DOM 中不存在的元素上调用了 click 事件。我需要将它绑定到身体上。

$(函数(){

$("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("")


    });

});

});

推荐阅读