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

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函数没有调用。

Answer 1

在动态添加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
    }); 
 }); 

Answer 2

你为什么不这样做呢

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