CODEWITHSUNDEEP
javascriptjqueryclick
Bandara
Bandara

Reputation: 283

jQuery .click() not working?

I generate the set of buttons within html table as follows and then I want to call to function when it click. 

$.each(childData, function(key, item) {
    var packPath = key.replace(/_/g, "/"); //Replace underscore with slash

    div.innerHTML = div.innerHTML + '<td>'+key+'</td>'
                + '<td><button type="button" data-id="'+key+'" class="download btn btn-success btn-xs">Originals</li></td></div>'; 

})

This is how I call the function but it's not working.

$(".download").click(function(){
    alert();
});

Where is the wrong in above code?

Upvotes: 5

Views: 21812

Answers (5)

CHANDAN KUMAR
CHANDAN KUMAR

Reputation: 11

$(document).ready(function() {
   $(".download").click(function(){
     alert();
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="downlaod">Download</button>

Upvotes: 0

Ramya Roy
Ramya Roy

Reputation: 237

Do you want it this way? I have given code for adding an entire table.Check this out

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];
 
  // creates a <table> element and a <tbody> element
  var tbl     = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // creating all cells
  for (var i = 0; i < 2; i++) {
    // creates a table row
    var row = document.createElement("tr");
 
    for (var j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
 
    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
 
  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute("border", "2");
}
<input type="button" value="Generate a table." onclick="generate_table()">

Upvotes: 0

Jai
Jai

Reputation: 74738

Delegate the event to static parent: 

$(div).on("click", ".download", function(){

Here div can be the static parent which was available when page was loaded at first load. Although document or body can also be used in place of div.

As you have not presented how you create div element but one thing has to be noticed that you are generating an invalid markup. As a td element can't be a child of div but table's tr.

Upvotes: 2

user2182349
user2182349

Reputation: 9782

You need to use event delegation.

If your table has an id of "button-table", you can create an event handler like so:

$("#button-table").on("click",function(e){
    var target = e.target;
    console.log($(target).attr("data-id"));
});

Upvotes: 0

Sahadev
Sahadev

Reputation: 1448

Try this:

$(document).on('click', '.download', function(){ 
     // Your Code
});

Upvotes: 20

Related Questions