weixin_33682719 2016-02-18 22:13
浏览 27

无法调用jQuery Ajax

I understand this question might be the same. I have googled, unfortunately i might have have missed something similar. I apologies for the same.

I have created a dynamic table in js based on some json response and updated the table accordingly. Now i have a submit button which posts currently selected raw data as an ajax call. But i am unable to call jquery. Following are the codes :

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

            }
        });
    });

I suspect that since id apply-button is created dynamically and it is not under document.load function, my button is not able to work.Please let me know if more information is required.

I would appreciate a response on this.

  • 写回答

2条回答 默认 最新

  • weixin_33736649 2016-02-18 22:29
    关注

    You need to include event.preventDefault()

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

    This stops the form from submitting, which is the default action on a submit button on a form, and it's why your page is getting refreshed.

    Edit:

    As mentioned in the comments, since the form is being dynamically generated, you will need a delegator, not a binding. Above code has been revised.

    评论

报告相同问题?

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波