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

Calling function itself in jquery not works

本文关键字：不起作用 函数 调用 jquery      更新时间：2023-09-26
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函数在用户按下删除按钮时不调用。

当你动态添加delete按钮时，你应该使用.on来绑定点击事件。同时将此绑定单击事件代码保存在函数之外:

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

语法错误。我不确定这是否是主要问题，但是没有这个它就不能工作。

您检查控制台了吗? F12

function(data){ miss }

你为什么不这样做呢:

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
    });
});
相关文章：