我正在一个网站上工作，并试图在动态生成的表上实现onClick函数。我使用javascript（testBoot.php）从HTML元素中获取值，并将其发送到php（table.php），以根据id查询DB，并在表中的testBoot.php上显示结果。现在我想在动态生成的表行中添加onClick函数，我也尝试了jQuery动态绑定，但仍然无法做到这一点
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>使用此版本的jQuery on方法绑定点击事件。这也适用于动态添加的项目。
$(function(){
$(document).on('click','.clickable', function(e) {
var _this =$(this);
alert('clicked');
// Use _this as needed
});
});
您的点击处理程序正在寻找一个"td"，但您的php正在"可点击"行中输出"th"。
$('.clickable').on("click", function() {
$('#name').val($(this).children('th:first-child').text());
});