jQuery .click() not working?

Asked 6/1, 2017 at 4:47 Answered 26/8, 2021 at 9:38

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?

Maypole answered 6/1, 2017 at 4:47 Comment(9)

Try calling $(".download").click(function(){ alert(); }); after you run $.each() instead of before. – Tumefy 6/1, 2017 at 4:50

why would a div have td as children? That is not valid HTML. – Mulry 6/1, 2017 at 4:53

@Mulry Because table and table headers are already created in the html page. – Maypole 6/1, 2017 at 4:56

whic jquery version you are using ? – Daddylonglegs 6/1, 2017 at 4:57

@VforVendetta jQuery v1.11.3 – Maypole 6/1, 2017 at 5:3

Then use $(document).on("click",".download", function(){//your code}); – Daddylonglegs 6/1, 2017 at 5:4

@VforVendetta Yes It works. Thanks. – Maypole 6/1, 2017 at 5:9

</td></div>" <-- that is the div that makes no sense.... You should be appending table rows to a table... – Mulry 6/1, 2017 at 5:12

@Mulry Oh got the point. You are correct. – Maypole 6/1, 2017 at 5:18

Try this:

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

Preconception answered 6/1, 2017 at 4:50 Comment(0)

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.

Dendritic answered 6/1, 2017 at 4:50 Comment(3)

Does this bypass the requirement to rebuild the hook after content on the page has changed ? (eg and new div with .download class ) – Tumefy 6/1, 2017 at 4:51

See, new div means it is not the static parent, as mentioned in the answer that parent should have to be static at first load which comes from the server. – Dendritic 6/1, 2017 at 4:54

Pretty neat. That will save some time :) – Tumefy 6/1, 2017 at 4:55

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

Magnoliamagnoliaceous answered 6/1, 2017 at 4:50 Comment(0)

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()">

Swum answered 6/1, 2017 at 5:22 Comment(0)

$(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>

Accusatory answered 26/8, 2021 at 9:38 Comment(1)

Waiting for dom ready, is a good shout but probably already being used. Your answer wouldn’t solve the issue, the .download buttons are being added dynamically, so any new buttons won’t have the click handler applied. That is why the accepted answer is using delegation to attatch the event handler to the document and passing the .button as the selector trigger of the event. – Chesterfieldian 26/8, 2021 at 10:41

Recommended topics

Hot tags