Unable to perform click on dynamically generated table

Question

I am working on a website and trying to implement onClick function on a dynamically generated table.I am getting value from an HTML element using javascript(testBoot.php) and sending it to a pHp (table.php) to query DB based on the id and display result on testBoot.php in a Table. Now I want to add onClick function to the dynamically generated table row,I also tried jQuery dynamic binding and still unable to do the same
testBoot.php

< script type = "text/javascript" >

  function showUser() {
    var id = document.getElementById("dynamic_data").value;
    if (id == "") {
      document.getElementById("table-responsive").innerHTML = "";
      return;
    } else {
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("table-responsive").innerHTML = xmlhttp.responseText;

        }
      };
      xmlhttp.open("GET", "table.php?q=" + id, true);
      xmlhttp.send();
    }
  } < /script>

<HTML>

<BODY>
  <div class="table-responsive" id="table-responsive"></div>
  <select name=city id="dynamic_data" class="form-control" onchange="showUser()"></select>
</BODY>

</HTML>

table.php

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<script>
        $('.clickable').on("click", function() {
        $('#name').val($(this).children('td:first-child').text());
});
</script >

<body>
  <?php $id=$ _GET[ 'q']; require 'data/connection.php'; // manage id echo "<input type = 'Hidden' id = 'testRunID'  value = '".$id. "'>"; $sql=mysql_query( ""); if($sql==f alse){ die(mysql_error()); } echo "
                
                  <table id = 'myTable'> " ?>

  <tr class='clickable'>

    <?php echo "
                    <th>Area Name</th>
                    <th>Total Test Cases Executed</th>
                    <th>Passed</th>
                    <th>Failed</th>
                    <th>Others (Running/ Blocked/ Time Out)</th></tr>"; while($row=m ysql_fetch_array($sql)) { $testRunID=$ row[ 'areaName']; $totalCount1=$ row[ 'totalCount']; $passCount1=$ row[ 'passStatus']; $failCount1=$ row[ 'failStatus']; $otherCount=$
    totalCount1 - ($passCount1 + $failCount1); ?>

    <tr class="notfirst">
      <?php echo "<td><a href='products.php?testRunID=".$id. "&areaName=" .$testRunID. "'>".$testRunID. "</a></td>"; //echo "<td>".$testRunID. "</td>"; echo "<td>".$totalCount1. "</td>"; echo "<td>".$passCount1. "</td>"; echo "<td>".$failCount1. "</td>"; echo
      "<td>".$otherCount. "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($conn); ?>

      <label for="name">Created by:</label>
      <input id="name" type="text" />

</body>

You need to do on click binding after the table is generated — NullPointerException, Dec 15 '15 at 22:13
is this your actual code? `< script type = "text/javascript" >` with the spaces and `< /script>` and space in this superglobal `$ _GET` those will break your code, also `$ row` and `$ totalCount1` - if not, edit your code please. hard to say here. — Funk Forty Niner, Dec 15 '15 at 22:19
@Fred-ii- .. No .. Since its not a complete code (missing HTML and other tags) I think Snipped must has messed up some thing as other scripts on the page are working perfectly fine — coolDude, Dec 15 '15 at 22:22
missing `;` here ` " ?>` so again, it's going to be very very hard to distinguish what's good and what's not. check for errors and check your console and if using `mysql_` to connect with. — Funk Forty Niner, Dec 15 '15 at 22:23
didn't find any space to answer my own question .. So posting it here ... Since I am getting the table from different php code (table.php) and using innerHTML to print the table on different page (testBoot.php) .. I need to bind the on click event with table / row /td .. when using 'on' to bind the event .. its passing null value at the load of page and not providing any dynamic binding .. — coolDude, Dec 16 '15 at 18:41
Function I used to Solve the problem https://jsfiddle.net/0cu9be4g/ — coolDude, Dec 16 '15 at 18:45

score 1 · Answer 1 · answered Dec 15 '15 at 22:13

1

Use this version of jQuery on method to bind the click event. This will work for dynamically added items also.

$(function(){
   $(document).on('click','.clickable', function(e) {
      var _this =$(this);
      alert('clicked');
      // Use _this as needed
   });
});

answered Dec 15 '15 at 22:13

Shyju

214,206
104
411
497

It should work as long as you provide the correct table markup, Here is a working sample http://jsbin.com/jezudu/edit?html,js,output – Shyju Dec 15 '15 at 22:22

score 0 · Answer 2 · answered Dec 15 '15 at 22:23

0

Your click handler is looking for a "td" but your php is outputting "th" in the "clickable" row.

$('.clickable').on("click", function() {
        $('#name').val($(this).children('th:first-child').text());
});

answered Dec 15 '15 at 22:23

Gregg Duncan

2,635
1
14
20

initially it was th only .. just for testing (hit and trial) I changed it to td – coolDude Dec 15 '15 at 22:28

Unable to perform click on dynamically generated table

2 Answers2