编辑：

Question

我理解这个问题可能是一样的。我用google搜索，不幸的是我可能错过了类似的东西。我为此道歉。

我已经基于一些json响应在js中创建了一个动态表，并相应地更新了表。现在我有一个提交按钮，将当前选择的原始数据作为ajax调用发布。但是我无法调用jquery。以下是代码：

JS：

$(document).ready(function(){
$('#ajax-button').click(function() {
    var formData=$("#careers").serialize();
    console.log("This is the skills : "+formData);
        $.ajax({
            type : "POST",
            url : "currentopening",
            //data : "skills="+skills,
            data:formData,
            dataType : "json",
            async: true,
            success : function(response) {
                var obj = JSON.parse(response);

                console.log("length of json response : "+obj.length)
                if(obj.length>0){
                //for (var i = 0; i < obj.length; i++) 
                //{
                    console.log("the characteristics : "+obj[0].title);
                    addRow(obj);
                //}
                }
                else{
                    document.getElementById("dynamictable").innerHTML="No jobs found!";
                }
            }
        });
    });


});function addRow(obj) {

var table_1 = document.getElementById("dynamictable");

for(var i=0;i<obj.length;i++){

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.id="apply-button";

var input = document.createElement("input");
input.setAttribute("id",obj[i].jobID);
input.setAttribute("type", "hidden");
input.setAttribute("name", "jobID");
input.setAttribute("value", obj[i].jobID);

var rowCount = table_1.getElementsByTagName("tr").length;

var row1 = table_1.insertRow(rowCount);
row1.id="x";

var cell0=row1.insertCell(0);
var cell1=row1.insertCell(1);
var cell2=row1.insertCell(2);
var cell3=row1.insertCell(3);
var cell4=row1.insertCell(4);
var cell5=row1.insertCell(5);
var cell6=row1.insertCell(6);
var cell7=row1.insertCell(7);
var cell8=row1.insertCell(8);
var cell9=row1.insertCell(9);

cell0.headers="title"; cell1.headers="qualification"; cell2.headers="salary"; cell3.headers="companyName"; cell4.headers="tags"; cell5.headers="location"; 
cell6.headers="experience"; cell7.headers="aboutCompany";cell8.id="hidden-element";
cell9.id="doit";

cell0.innerHTML= obj[i].title;
cell1.innerHTML= obj[i].qualification;
cell2.innerHTML= obj[i].salary;
cell3.innerHTML= obj[i].companyName;
cell4.innerHTML= obj[i].tags;
cell5.innerHTML= obj[i].location;
cell6.innerHTML= obj[i].experience;
cell7.innerHTML= obj[i].aboutCompany;
document.getElementById("doit").appendChild(btn);
document.getElementById("hidden-element").appendChild(input);}};$('#apply-button').click(function() {
console.log("id of current element : ");
    var formData=document.getElementById(this);
    console.log("id of current element : "+formData);
    //console.log("This is the filter : "+formData);
        $.ajax({
            type : "GET",
            url : "apply",
            //data : "skills="+skills,
            data:"jobID="+formData,
            dataType : "text",
            async: true,
            success : function(response) {console.log("The response : "+response);

            }
        });
    });

我怀疑由于id apply-button 是动态创建的，而且不在 document.load 功能下，我的按钮无法正常工作。请让我知道如果需要更多信息。

我很感激对此做出回应。

Answer 1

您需要加入event.preventDefault()

$(document).on("click", "#ajax-button", function (event) {
  ...
  ...
  ...
  event.preventDefault();
}

这会停止提交表单，这是表单上提交按钮的默认操作，这就是您的网页刷新的原因。

编辑：

正如评论中所提到的，由于表单是动态生成的，因此您需要一个委托者，而不是绑定者。以上代码已经修改。

Answer 2

或者，您可以尝试

$().click(){
    return false;
}

停止执行回发

无法调用jquery ajax

2 个答案:

编辑：