Calling function itself in jquery not works

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

i have called loadprovinces function when user add a province for a particular country as user adds a province it inserts into a province table so it is working , a problem is that loadProvinces function is not calling when user presses a delete button .

where is your delete button and how you are calling this function? — Bhushan Kawadkar, Jul 30 '14 at 07:47
You'll have to add some HTML with at least the table and button to help us help you figure out why it isn't being triggered. Preferably a fiddle.. — somethinghere, Jul 30 '14 at 07:47
possible duplicate of [jQuery how to bind onclick event to dynamically added HTML element](http://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element) — Patrick Evans, Jul 30 '14 at 07:48
Closing bracket `};` not appear after `$("#appendprovince").show();` ? — guest271314, Jul 30 '14 at 07:54

MythThrazz · Answer 1 · 2014-07-30T07:56:23.160

Why don't you just do it this way:

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

Fixed the syntax. Still, think of adding some more identifiers to the line firing the 'click' event. Because now it will fire each time you click *ANY* input. — MythThrazz, Jul 30 '14 at 07:57

score 0 · Answer 2 · answered Jul 30 '14 at 07:49

0

There is syntax error. Not sure if it is the main Problem, but it can not works without this.

Have you checked console? F12

function(data){ miss }

answered Jul 30 '14 at 07:49

m1k1o

2,344
16
27

Bhushan Kawadkar · Accepted Answer · 2014-07-30T07:55:02.240

As you are adding delete button dynamically then you shuld use .on to bind click event. Also keep this bind click event code outside function :

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

If you are suggesting event delegation then move that code outside function — Satpal, Jul 30 '14 at 07:50

Calling function itself in jquery not works

3 Answers3