Jquery on() function not working

Question

var btnid=0;
function show_visited_stops(bus_stops_visited,map){


                var $k=0;
                var visited_bus="";
                var total_time=0;
                visited_bus="<table border=\"1\">";
                while($k<bus_stops_visited.length){

                $A=bus_stops_visited[$k];

                if ($k==bus_stops_visited.length-1){
                var latlng=findlatlng($A);
                var name=find_stop_name($A);
                btnid++;
                var btn_id="btn"+btnid;
                visited_bus+="<tr><td><button id="+btn_id+" class=\"linked\">"+name+"</button></td>"+ "<td>"+"Time taken:"+total_time.toFixed(2) +'min'+ "</td></tr>";
                var c="#"+btn_id;
                $(c).on("click", function(event){
                    alert("DSD");
                });

                    break;
                }
                $k=$k+1;
                $B=bus_stops_visited[$k];

                var name=find_stop_name($A);
                btnid++;
                var btn_id="btn"+btnid;
                visited_bus+="<tr><td><button id="+btn_id+" class=\"linked\">"+name+"</button></td>"+ "<td>"+"Time taken:"+total_time.toFixed(2) +'min'+ "</td></tr>";
                var c="#"+btn_id;
                $(c).on("click", function(event){
                    alert("DSD");
                });



                total_time+=parseFloat(find_edge_weight($A,$B));



            //  alert("edge traversed"+edge_traversed);
        }
        visited_bus+="</table>"; 

        alert(visited_bus);
        return visited_bus;
}

I want each button generated to have a click event attached to it. But its not working. I also tried .click() .bind() its not working either.

Any suggestions. I'm stucked What i want is when each button is clicked, the alert should be fired. (i will replace the alert with another function).

UPDATE: I got the solution: i've used

$(document).on("click", c, function(){ alert("Goodbye!"); });

Answer 1

Step by step:

1. You create an id:

   var btn_id="btn"+btnid;
   

2. You create a string, which will be a dom node later

   visited_bus+="<tr><td><button id="+btn_id+"....</td></tr>";
   

3. You try to add an event handler to the button, but that button doesn't really exist yet, so the click event will be attached to ... nothing.

   $("#"+btn_id).on("click", function(event){ alert("DSD"); });
   

A possible solution: don't return a html string, but a jQuery object with real elements inside:

    // before return actually create elements
    var $visited_bus = $(visited_bus);
    // now you can attach events to these group of elements
    $visited_bus.on("click", function(event){ alert("DSD"); });
    // change the caller function to deal with the different result type
    return $visited_bus;

Answer 2

You are creating c element on fly, and thats why on event isnt working. You should attach on event to element created before.

For example can you try this.

$(document).on("click", "button.linked", function(event){
    alert("DSD");
});

Answer 3

This is because you are setting the click handler before the element is loaded in DOM.

Answer 4

Follow the below steps,

Step 1: In the function show_visited_stops change the below line,

visited_bus="<table border=\"1\">";

to

visited_bus="<table border=\"1\" class=\"visited_stops_tbl\">";

Step 2: Implement the .on method in below syntax,

$('.visited_stops_tbl').on ('click', '.linked', function () {
   //btn click function
})

Step 3: Add the Step 2 code in place just after the table is inserted.

Answer 5

You are trying to bind the event before even adding the html into document or documeFragement.

If you want to leverage the on's feature to handle events for dynamically created events then move the on click event handler out side the function and attach it on the element which will be present on the page load or which do not get refreshed by any action on the page or else attach it on the document. Try this.

//Here instead of document you can use a container which will host this table 
$(docuemnt).on('click', '.linked', function () {
     alert("DSD");
})