Question

我正在一个网站上工作并尝试在动态生成的表上实现onClick函数。我使用javascript（testBoot.php）从HTML元素获取值并将其发送到pHp（table.php）以查询数据库基于表中testBoot.php的id和显示结果。现在我想将onClick函数添加到动态生成的表行中，我也试过jQuery动态绑定但仍无法做同样的事情 testBoot.php

＆＃13;

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

＆＃13;

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

＆＃13;

的 table.php

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用此版本的jQuery on方法绑定click事件。这也适用于动态添加的项目。

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

Answer 2

您的点击处理程序正在寻找＆＃34; td＆＃34;但是你的php正在输出＆＃34; th＆＃34;在＆＃34;可点击的＆＃34;行。

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

无法执行单击动态生成的表

2 个答案: