Question

function loadProvinces(data){

var province = "<tr><th>Options</th><th>Province</th></tr>";
var json = $.parseJSON(data);

for(var i=0; i<json.province_info.length; i++){
    province += "<tr><td><input type='button' id='"+json.province_info[i].province_id+"' value='Delete' /></td><td>"+json.province_info[i].province_name+"</td></tr>";
 }

  $("#appendprovince").empty();
  $("#appendprovince").append(province);
  $("#appendprovince").show();  

  $(":input").click(function(e) {

    var id = this.id;
    var url = "http://localhost:8080/CurdServlet/ProvinceServlet";
    $.post(url,{"getProvince" : "delete_province","province_id":""+id},
        function(data){
            alert(data);     // its working and shows data successfully 
        loadProvinces(data); // here loadProvinces function not working only
   }); 

});

}//end loadProvinces

当用户为特定国家/地区添加省份时，我调用了loadprovinces函数当用户添加省份时，它会插入省表，因此它正在工作，问题是当用户按下删除按钮时，loadProvinces函数没有调用。

Answer 1

你为什么不这样做：

function loadProvinces (data) {

    var province = "<tr><th>Options</th><th>Province</th></tr>";
    var json = $.parseJSON(data);

    for(var i = 0; i < json.province_info.length; i++){
        province += "<tr><td><input type='button' id='" + json.province_info[i].province_id + "' value='Delete' /></td><td>" + json.province_info[i].province_name + "</td></tr>";
    }

    $("#appendprovince").empty();
    $("#appendprovince").append(province);
    $("#appendprovince").show();
}
;//end loadProvinces

$(":input").click(function (e) { // it would be nice to add some more identifiers e.g. class to fire only when needed

    var id = this.id;
    var url = "http://localhost:8080/CurdServlet/ProvinceServlet";
    $.post(url, {"getProvince": "delete_province", "province_id": "" + id},
    function (data) {
        alert(data);     // its working and shows data successfully
        loadProvinces(data); // here loadProvinces function not working only
    });
});

Answer 2

存在语法错误。不确定它是否是主要问题，但如果没有这个问题它就无法运作。

你检查了控制台吗？ F12

function(data){小姐}

Answer 3

当您动态添加delete按钮时，应使用.on绑定click事件。同时将此绑定单击事件代码保留在函数外：

  function loadProvinces(data){

     var province = "<tr><th>Options</th><th>Province</th></tr>";
     var json = $.parseJSON(data);

     for(var i=0; i<json.province_info.length; i++){
         province += "<tr><td><input type='button' id='"
                  +json.province_info[i].province_id
                  +"' value='Delete' /></td><td>"
                  +json.province_info[i].province_name+"</td></tr>";
     }

     $("#appendprovince").empty();
     $("#appendprovince").append(province);
     $("#appendprovince").show();  

}//end loadProvinces

// bind click event for dynamically generated element
$(document).on("click",":input",function(e) {

   var id = this.id;
   var url = "http://localhost:8080/CurdServlet/ProvinceServlet";
   $.post(url,{"getProvince" : "delete_province","province_id":""+id},
        function(data){
           alert(data);     // its working and shows data successfully 
           loadProvinces(data); // here loadProvinces function not working only
    }); 
 });

在jquery中调用函数本身不起作用

3 个答案: