-3
我有一个PHP页面显示的记录，并在我有一个“打印”按钮的其中一列的表：JS功能按键不灵
<td>
<input type="button" class="btn-print" value="Print" id="printrec">
</td>
我已经JavaScript文件添加到PHP ：
<script type="text/javascript" src="js/logic.js"></script>
在logic.js功能：
$(document).ready(function() {
// Print selected record's entry form
$('#printrec').click(function() {
alert("Print btn pressed");
});
});
在页面上工作的其他按钮，调用适当的JS functi在ID上，但点击“打印”时没有任何反应。有任何想法吗？
编辑 searchEntries.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Contest Entry Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js"></script>
</head>
<body>
<form>
<input type="text" id="entry-number" class="form-control" placeholder="Entry # (separate multiple entries with commas)" value="" name="con-year" />
<input type="button" id="formsearch" class="btn btn-default" value="Search" />
</form>
<table id="show-entries">
<tr class="tbhead">
<th> Select </th>
<th style="display:none"> ID </th>
<th> Entry # </th>
<th> Barcode </th>
<th> Entrant Name </th>
<th> Title of Entry </th>
<th> Category </th>
<th> Paid </th>
<th> Date Paid </th>
<th> Date Created </th>
<th> Date Last Updated </th>
<th> Last Updated By </th>
<th> Print </th>
</tr>
</table>
</body>
</html>
searchentries.php
<?php
.
.
.
$stmt = $conn->prepare($sql);
$stmt->execute($params);
if ($stmt->rowCount() > 0) {
// Loop through resultset and add to JSON object
$stmt->setFetchMode(PDO::FETCH_ASSOC);
while($row = $stmt->fetch()) {
$json[] = $row;
}
// Return encoded JSON object to logic.js
echo json_encode($json);
} else {
echo "NoResults";
}
logic.js
$(document).ready(function() {
var check="checklist";
var unCheck ="unchecked-list";
var cantCheck ="cantCheck";
//select all button
$('#selectall').click(function() {
if(this.checked) {
//checked here
$('#show-entries .unchecked-list').prop('checked', true);
$('#show-entries .unchecked-list').attr('class', 'checklist');
}
else {
//unchecked here
$('#show-entries .checklist').prop('checked', false);
$('#show-entries .checklist').attr('class', 'unchecked-list');
}
});
//checking checkbox
$(document).on('change','.checklist, .unchecked-list',function() {
if(this.checked) {
//checked here
$(this).attr('class', 'checklist');
}
else {
//unchecked here
$(this).attr('class', 'unchecked-list');
}
});
$('#formsearch').click(function() {
//getting values of text boxes
var contestYear= $('#contest-year').val();
var entryNumber= $('#entry-number').val();
var barCode= $('#barcode').val();
var firstName= $('#first-name').val();
var lastName= $('#last-name').val();
var title= $('#title-name').val();
//remvoing previous row
$('.child').remove();
$.ajax({
type: "POST",
url: "php/searchreceive.php",
data:{"c_year": contestYear, "e_number": entryNumber, "bCode":barCode, "fName":firstName, "lName": lastName, "title":title}
}).done(function(status) {
status=status.trim();
if(status=="NoResults") {
alert("No records found - please try again.");
}
else {
var result = JSON.parse(status);
var p;
var paidOp;
for(var i=0; i<result.length; i++) {
// Loop through each record in 'status'
//getting date paid
var datePaid =result[i]["DatePaid"];
if(datePaid==null) {
datePaid = "";
}
//getting yes no for paid
p = result[i]["Paid"].trim();
if(p==1) {
paidOp="Yes";
}
else {
paidOp="";
//datePaid="";
}
//getting date created
var dateCreated =result[i]["DateCreated"];
if(dateCreated==null) {
dateCreated = "";
}
//getting date last updated
var dateUpdated =result[i]["DateLastUpdated"];
if(dateUpdated==null) {
dateUpdated = "";
}
//getting last updated by
var updatedBy =result[i]["LastUpdatedBy"];
switch(updatedBy) {
case "wf_boxoffice":
updatedBy = "Box Office";
break;
case "wf_anon":
updatedBy = "Entrant";
}
$('#show-entries').append('<tr class="child"><td ><input type="checkbox" class='+unCheck+' id='+result[i]["ID"]+'></td>\
<td style="display:none">'+result[i]["ID"]+'</td>\
<td>'+result[i]["Entry_Form_Number"]+'</td>\
<td>'+result[i]["Barcode_Text"]+'</td>\
<td>'+result[i]["Entrant_Name"]+'</td>\
<td>'+result[i]["Model_Name"]+'</td>\
<td>'+result[i]["Category_Name"]+'</td>\
<td>'+paidOp+'</td>\
<td>'+datePaid+'</td>\
<td>'+dateCreated+'</td>\
<td>'+dateUpdated+'</td>\
<td>'+updatedBy+'</td>\
<td><input type="button" class="btn-print" value="Print" id="printrec"/></td>\n\
</tr>');
//checking paid or not and disabling checkbox if FALSE
if(result[i]["Paid"]==1) {
//disabling unpaid checkboxes
$('#'+result[i]["ID"]).prop('disabled', true);
//changing classs name of unchecked
$('#'+result[i]["ID"]).attr('class', 'cantCheck');
}
}
}
});
});
// Proceed button click
$('#paid').click(function() {
//getting ids of checkboxes
var idArray = [];
$('.checklist').each(function() {
idArray.push(this.id);
});
if(idArray.length>0) {
//call ajax for updating rows
$.ajax({
type: "POST",
url: "php/updatepaid.php",
data:{idArray:idArray}
}).done(function(status) {
status=status.trim();
alert(status);
window.location.href = '../index.php';
});
}
else {
alert("No row selected");
}
});
// Reset all data
$('#formreset').click(function() {
//remvoing table rows
$('.child').remove();
});
// Print selected record's entry form
$('#printrec').click(function() {
alert("Print btn pressed");
});
});
编辑＃2 - logic.js
$(document).ready(function() {
setTimeout(function(){
addClickHandlers('.printrec');
}, 1000);
var check="checklist";
var unCheck ="unchecked-list";
var cantCheck ="cantCheck";
//select all button
$('#selectall').click(function() {
if(this.checked) {
//checked here
$('#show-entries .unchecked-list').prop('checked', true);
$('#show-entries .unchecked-list').attr('class', 'checklist');
}
else {
//unchecked here
$('#show-entries .checklist').prop('checked', false);
$('#show-entries .checklist').attr('class', 'unchecked-list');
}
});
//checking checkbox
$(document).on('change','.checklist, .unchecked-list',function() {
if(this.checked) {
//checked here
$(this).attr('class', 'checklist');
}
else {
//unchecked here
$(this).attr('class', 'unchecked-list');
}
});
$('#formsearch').click(function() {
//getting values of text boxes
var contestYear= $('#contest-year').val();
var entryNumber= $('#entry-number').val();
var barCode= $('#barcode').val();
var firstName= $('#first-name').val();
var lastName= $('#last-name').val();
var title= $('#title-name').val();
//remvoing previous row
$('.child').remove();
$.ajax({
type: "POST",
url: "php/searchreceive.php",
data:{"c_year": contestYear, "e_number": entryNumber, "bCode":barCode, "fName":firstName, "lName": lastName, "title":title}
}).done(function(status) {
status=status.trim();
if(status=="NoResults") {
alert("No records found - please try again.");
}
else {
var result = JSON.parse(status);
var p;
var paidOp;
for(var i=0; i<result.length; i++) {
// Loop through each record in 'status'
//getting date paid
var datePaid =result[i]["DatePaid"];
if(datePaid==null) {
datePaid = "";
}
//getting yes no for paid
p = result[i]["Paid"].trim();
if(p==1) {
paidOp="Yes";
}
else {
paidOp="";
//datePaid="";
}
//getting date created
var dateCreated =result[i]["DateCreated"];
if(dateCreated==null) {
dateCreated = "";
}
//getting date last updated
var dateUpdated =result[i]["DateLastUpdated"];
if(dateUpdated==null) {
dateUpdated = "";
}
//getting last updated by
var updatedBy =result[i]["LastUpdatedBy"];
switch(updatedBy) {
case "wf_boxoffice":
updatedBy = "Box Office";
break;
case "wf_anon":
updatedBy = "Entrant";
}
$('#show-entries').append('<tr class="child"><td ><input type="checkbox" class='+unCheck+' id='+result[i]["ID"]+'></td>\
<td style="display:none">'+result[i]["ID"]+'</td>\
<td>'+result[i]["Entry_Form_Number"]+'</td>\
<td>'+result[i]["Barcode_Text"]+'</td>\
<td>'+result[i]["Entrant_Name"]+'</td>\
<td>'+result[i]["Model_Name"]+'</td>\
<td>'+result[i]["Category_Name"]+'</td>\
<td>'+paidOp+'</td>\
<td>'+datePaid+'</td>\
<td>'+dateCreated+'</td>\
<td>'+dateUpdated+'</td>\
<td>'+updatedBy+'</td>\
<td><input type="button" class="btn-print printrec" value="Print"/></td>\n\
</tr>');
//checking paid or not and disabling checkbox if FALSE
if(result[i]["Paid"]==1) {
//disabling unpaid checkboxes
$('#'+result[i]["ID"]).prop('disabled', true);
//changing classs name of unchecked
$('#'+result[i]["ID"]).attr('class', 'cantCheck');
}
}
}
});
});
// Proceed button click
$('#paid').click(function() {
//getting ids of checkboxes
var idArray = [];
$('.checklist').each(function() {
idArray.push(this.id);
});
if(idArray.length>0) {
//call ajax for updating rows
$.ajax({
type: "POST",
url: "php/updatepaid.php",
data:{idArray:idArray}
}).done(function(status) {
status=status.trim();
alert(status);
window.location.href = '../index.php';
});
}
else {
alert("No row selected");
}
});
// Reset all data
$('#formreset').click(function() {
//remvoing table rows
$('.child').remove();
});
});
function addClickHandlers(identifier) {
$(identifier).click(function() {
data = "";
$(this).parents('tr').children().each(function() {
data += $(this).text() + " ";
});
alert("Print btn pressed from " + data);
});
}
编辑＃3 我只需要在表中的第一列中的值传递到PHP文件，但因为它是一个隐藏的专栏中，我不能使用的.text（）这样的：
data = $(this).parents('tr').find("td:first").text();
有另一种方式，只从行得到一个值，如果它是隐藏？该解决方案适用于获取所有列值，即使是第一个隐藏的值，但似乎并不适用于它自己。
控制台上是否有任何错误？当你调试这个时，当分配这个点击处理程序时，'$（'＃printrec'）'根本找不到这个元素？这看起来很好，但是你没有向我们展示任何东西可能是错误的。 – David
你是否在页面中重复相同的ID？提供重现问题的[mcve] – charlietfl
表格中每行都有一个打印按钮，所以这可能是个问题。但即使我只有1条记录，点击上也没有任何反应。如何检查控制台上的错误？当谈到JS调试时，我是一个新手。我在Apache日志文件夹中看不到任何错误，如果有帮助 – RossW