如果我在子页面上使用 JQuery 代码将从表格中选择的行的文本传输到父页面或开启者页面，我不知道为什么我的 JQuery 代码不起作用。表格中的行是使用 AJAX 加载的。
如果我尝试创建一个表，在 HTML 文件本身上设置它的行和 td，并使用 JQuery 代码，它就可以工作。怎么样？
这是我的 HTML、AJAX、脚本代码
HTML
<body onload="showDetails()">
<div class="container">
<div class="row" style="margin-top: 30px;">
<div class="col-sm-12 col-md-12 col-lg-12">
<center>
<h2>Products</h2>
</center>
<br/>
<table id="products-table" class="table table-hover">
</table>
</div>
</div>
</div>
<script src="script/jquery-2.1.1.min.js"></script>
<script>
function showDetails() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("products-table").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("POST", "product.php", true);
xmlhttp.send();
}
</script>
<script src="q.js"></script>
PHP
echo '<tr>
<th>Image</th>
<th>Brand</th>
<th>Model</th>
<th>Price</th>
<th>Terms</th>
<th>Class</th>
<th></th>
</tr>';
try {
$dbh = new PDO('mysql:host=localhost;dbname=mfcwebsitedb', 'root', 'pass@word1');
foreach($dbh->query('SELECT * from products') as $row)
{
echo '<tr>
<td class = "img">'.'<img src = "product-img/'.$row['img_name'].'" style = "width: 200px; height: 200px; padding-top: 5px; padding-bottom: 5px;">'.'</td>
<td class = "brand">'.$row['brand'].'</td>
<td class = "model">'.$row['model'].'</td>
<td class = "price">'.$row['price'].'</td>
<td class = "terms">'.$row['terms'].'</td>
<td class = "class">'.$row['class'].'</td>
<td><button class = "btn btn-primary selectbtn">Select</button></td>
</tr>';
}
$dbh = null;
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
$dbh = null;
}
JQUERY
$(document).ready(function(){
$('#products-table .selectbtn').click(function() {
var td = $(this).closest('tr');
var f;
var s;
var t;
var q;
var w;
var g;
$(td).each(function(){
f = $(this).find(".class").html();
s = $(this).find(".brand").html();
t = $(this).find(".model").html();
q = $(this).find(".price").html();
w = $(this).find(".terms").html();
g = $(this).find(".img").html();
});
var x = 'Class: ' + f + '\n' + 'Brand: ' + s + '\n'
+ 'Model: ' + t + '\n'
+ 'Price: ' + q + '\n' + 'Terms: ' + w;
var z = g + '<br/>' + '<b>Class:</b> ' + f + '<br/>\n'
+ '<b>Brand: </b>' + s + '<br/>\n'
+ '<b>Model: </b>' + t + '<br/>\n'
+ '<b>Price: </b>' + q + '<br/>\n' + '<b>Terms: </b>' + w;
opener.document.motorappform.productdesc.value = x;
opener.document.motorappform.productdeschidden.value = z;
self.close();
});
});
最佳答案
您必须使用事件委托(delegate)来捕获动态创建的元素:
$(document).on('click', '#products-table .selectbtn', function() {
// your code here ..
});
编辑
此外，在您的函数中，将 $(this) 存储在一个变量中并使用该变量而不是多次实例化它:
(使用 td 而不是 $(td))
td.each(function(){
var that = $(this);
f = that.find(".class").html();
s = that.find(".brand").html();
t = that.find(".model").html();
q = that.find(".price").html();
w = that.find(".terms").html();
g = that.find(".img").html();
});
关于javascript - 脚本在子页面上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27834801/