单击按钮时，我的模态不会触发。我已经尝试了所有可能的方法，并且尝试了所有可能的“Hit＆amp; Try”方法。所以我回到这个论坛寻求帮助。我的代码如下： -
Main.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table id="recordsfromraky" class="table table-striped table-bordered">
</table>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
fetchChange();
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
}
});
};
});
</script>
get_value.php代码如下： -
<?php
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/dbconnect.php';
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
$finyr = $_POST['finyear'];
$commdname = $_POST['cmdname'];
$stationname = $_POST['stnname'];
$statustype = $_POST['statusname'];
$cfanamed = $_POST['cfaname'];
$catname = $_POST['wkcatname'];
$finyr = str_replace('"', '', $finyr);
$commdname = str_replace('"', '', $commdname);
$stationname = str_replace('"', "'", $stationname);
$statustype = str_replace('"', "", $statustype);
$cfanamed = str_replace('"', '', $cfanamed);
$catname = str_replace('"', '', $catname);
//var_dump($_POST);////////////////////////////////////////
$wherefy ='';
$wherecmd ='';
$wherestn = '';
$wherestatus ='';
$wherecfa ='';
$wherecat ='';
$tcn='';
if (empty($finyr)){
$wherefy = '';
}else{
$tcn = "'" . '%' . str_replace(' ', '', $finyr) . '%' . "'";
$wherefy = 'WHERE (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
if (!empty($stationname)) {
if ($stationname === "All Stations"){
$wherestn='';
}else{
$tcn='';
$tcn = "'" . str_replace("''", "", $stationname) . "'";
$wherestn = 'AND (`stationlist`.`Station` = ' . $tcn . ')';
}
}else{
$wherestn='';
}
if (!empty($commdname)) {
if ($commdname === "All Commands"){
$wherecmd='';
}else{
$tcn='';
$tcn = "'" . '%'. str_replace(' ', '', $commdname) . '%' . "'";
$wherecmd = 'AND (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
}else{
$wherecmd='';
}
if (!empty($statustype)) {
if ($statustype === "All Status"){
$wherestatus='';
}else{
$tcn='';
$tcn = "'" . '%'. $statustype . '%' . "'";
$wherestatus = 'AND (`workstatuslist`.`Status_Type` LIKE ' . $tcn . ')';
}
}else{
$wherestatus='';
}
if (!empty($cfanamed)) {
if ($cfanamed === "All CFA"){
$wherecfa='';
}else{
$tcn='';
$tcn = "'" . '%'. $cfanamed . '%' . "'";
$wherecfa = 'AND (`cfalist`.`CFA` LIKE ' . $tcn . ')';
}
}else{
$wherecfa='';
}
if (!empty($catname)) {
if ($catname === "All Categories"){
$wherecat='';
}else{
$tcn='';
$tcn = "'" . '%'. $catname . '%' . "'";
$wherecat = 'AND (`workscategorylist`.`Category_Type` LIKE ' . $tcn . ')';
}
}else{
$wherecat='';
}
$WhereCondition = $wherefy . " " . $wherestatus . " " . $wherestn . " " . $wherecfa . " " . $wherecat . " " . $wherecmd;
//var_dump( $WhereCondition);
//var_dump($wherefy);
//var_dump($wherecmd);
//var_dump($wherestn);
//var_dump($wherestatus);
//var_dump($wherecfa);
//ovar_dump($wherecat);
$sql ="SELECT
*
FROM `amwplist`
LEFT OUTER JOIN `workscategorylist` ON `amwplist`.`Category_ID` = `workscategorylist`.`Category_ID`
INNER JOIN `stationlist` ON `amwplist`.`Station_ID` = `stationlist`.`Station_ID`
LEFT OUTER JOIN `commandhqlist` ON `stationlist`.`Command_ID` = `commandhqlist`.`CommandHQ_ID`
LEFT OUTER JOIN `sectorlist` ON `stationlist`.`Sector_ID` = `sectorlist`.`Sector_ID`
LEFT OUTER JOIN `celist` ON `stationlist`.`CE_ID` = `celist`.`CE_ID`
LEFT OUTER JOIN `cwelist` ON `stationlist`.`CWE_ID` = `cwelist`.`CWE_ID`
LEFT OUTER JOIN `gelist` ON `stationlist`.`GE_ID` = `gelist`.`GE_ID`
LEFT OUTER JOIN `ifalist` ON `amwplist`.`IFA_ID` = `ifalist`.`IFA_ID`
LEFT OUTER JOIN `cdalist` ON `stationlist`.`CDA_ID` = `cdalist`.`CDA_ID`
LEFT OUTER JOIN `cfalist` ON `amwplist`.`CFA_ID` = `cfalist`.`CFA_ID`
LEFT OUTER JOIN `workstatuslist` ON `amwplist`.`Status_ID` = `workstatuslist`.`Status_ID` " .
$WhereCondition . " " .
"ORDER BY substring_index(amwplist.Work_ID_by_MoD, '/', 1), CONVERT(substring_index(amwplist.Work_ID_by_MoD, '/', -1), UNSIGNED INTEGER)
";
$tableRow = '<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
//var_dump($conn);
while ($row= mysqli_fetch_array($result)) {
//$idnumber = CONVERT(substring_index($row['Work_ID_by_MoD'], '/', -1), UNSIGNED INTEGER);
$tableRow = $tableRow . '<tr>' ;
$tableRow = $tableRow . '<td>'. $row['Category_Type'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Station'] . '</td>';
$trow = $row['Work_ID_by_MoD'];
//var_dump($trow);
//var_dump('<td><input type="button" name= "' . $row['Work_ID_by_MoD'] . '" value= "' . $row['Work_ID_by_MoD'] . '" id= "' . $row['Work_ID_by_MoD'] . '" class="btn btn-info btn-xs view_data" /></td>');
$tableRow = $tableRow . '<td><input type="button" name= "' . $trow . '"' . 'value= "' . $trow . '" id= "' . $trow . '" class="btn btn-info btn-xs view_data" /></td>';
$tableRow = $tableRow . '<td>'. $row['Nomenclature'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Cost'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Status_Type'] . '</td>';
$tableRow = $tableRow . '</tr>';
}
$tableRow = $tableRow . '</tbody>';
//var_dump($tableRow);
echo ($tableRow);
$conn->close();
ob_end_flush();
?>
单击第三列中的MoD ID时，函数.click（）不会触发。此列中的行内容如下所示： -
<input type="button" name="AMWP/2017-18/1" value="AMWP/2017-18/1" id="AMWP/2017-18/1" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/2" value="AMWP/2017-18/2" id="AMWP/2017-18/2" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/3" value="AMWP/2017-18/3" id="AMWP/2017-18/3" class="btn btn-info btn-xs view_data">
我现在认为这里可能存在Handle问题，因为get_value.php将表填充到main.php中，然后我尝试通过单击get_value.php生成的按钮来触发Modal。
答案 0 :(得分：1)
问题是您尝试在非现有对象上绑定click事件。即$('.view_data').click(...在您的ajax调用完成之前发生，因此没有具有类view_data的元素。
您有两种选择：
1）不要在按钮上绑定事件，而是在body上绑定。我个人更喜欢这种方法，因为它不绑定事件但使用委托。它更容易调试和维护（特别是如果你最终在一个文档中有很多事件）：
$('body').on('click', '.view_data', function(){
alert('clicked ' + $(this).val());
});
2）在将结果写入DOM之后，将事件绑定放在ajax调用的success方法中
fetchChange();
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
}
});
};
}）;
答案 1 :(得分：0)
修改后的get_value.php如下： -
<?php
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/dbconnect.php';
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
$finyr = $_POST['finyear'];
$commdname = $_POST['cmdname'];
$stationname = $_POST['stnname'];
$statustype = $_POST['statusname'];
$cfanamed = $_POST['cfaname'];
$catname = $_POST['wkcatname'];
$finyr = str_replace('"', '', $finyr);
$commdname = str_replace('"', '', $commdname);
$stationname = str_replace('"', "'", $stationname);
$statustype = str_replace('"', "", $statustype);
$cfanamed = str_replace('"', '', $cfanamed);
$catname = str_replace('"', '', $catname);
//var_dump($_POST);////////////////////////////////////////
$wherefy ='';
$wherecmd ='';
$wherestn = '';
$wherestatus ='';
$wherecfa ='';
$wherecat ='';
$tcn='';
if (empty($finyr)){
$wherefy = '';
}else{
$tcn = "'" . '%' . str_replace(' ', '', $finyr) . '%' . "'";
$wherefy = 'WHERE (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
if (!empty($stationname)) {
if ($stationname === "All Stations"){
$wherestn='';
}else{
$tcn='';
$tcn = "'" . str_replace("''", "", $stationname) . "'";
$wherestn = 'AND (`stationlist`.`Station` = ' . $tcn . ')';
}
}else{
$wherestn='';
}
if (!empty($commdname)) {
if ($commdname === "All Commands"){
$wherecmd='';
}else{
$tcn='';
$tcn = "'" . '%'. str_replace(' ', '', $commdname) . '%' . "'";
$wherecmd = 'AND (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
}else{
$wherecmd='';
}
if (!empty($statustype)) {
if ($statustype === "All Status"){
$wherestatus='';
}else{
$tcn='';
$tcn = "'" . '%'. $statustype . '%' . "'";
$wherestatus = 'AND (`workstatuslist`.`Status_Type` LIKE ' . $tcn . ')';
}
}else{
$wherestatus='';
}
if (!empty($cfanamed)) {
if ($cfanamed === "All CFA"){
$wherecfa='';
}else{
$tcn='';
$tcn = "'" . '%'. $cfanamed . '%' . "'";
$wherecfa = 'AND (`cfalist`.`CFA` LIKE ' . $tcn . ')';
}
}else{
$wherecfa='';
}
if (!empty($catname)) {
if ($catname === "All Categories"){
$wherecat='';
}else{
$tcn='';
$tcn = "'" . '%'. $catname . '%' . "'";
$wherecat = 'AND (`workscategorylist`.`Category_Type` LIKE ' . $tcn . ')';
}
}else{
$wherecat='';
}
$WhereCondition = $wherefy . " " . $wherestatus . " " . $wherestn . " " . $wherecfa . " " . $wherecat . " " . $wherecmd;
//var_dump( $WhereCondition);
//var_dump($wherefy);
//var_dump($wherecmd);
//var_dump($wherestn);
//var_dump($wherestatus);
//var_dump($wherecfa);
//ovar_dump($wherecat);
$sql ="SELECT
*
FROM `amwplist`
LEFT OUTER JOIN `workscategorylist` ON `amwplist`.`Category_ID` = `workscategorylist`.`Category_ID`
INNER JOIN `stationlist` ON `amwplist`.`Station_ID` = `stationlist`.`Station_ID`
LEFT OUTER JOIN `commandhqlist` ON `stationlist`.`Command_ID` = `commandhqlist`.`CommandHQ_ID`
LEFT OUTER JOIN `sectorlist` ON `stationlist`.`Sector_ID` = `sectorlist`.`Sector_ID`
LEFT OUTER JOIN `celist` ON `stationlist`.`CE_ID` = `celist`.`CE_ID`
LEFT OUTER JOIN `cwelist` ON `stationlist`.`CWE_ID` = `cwelist`.`CWE_ID`
LEFT OUTER JOIN `gelist` ON `stationlist`.`GE_ID` = `gelist`.`GE_ID`
LEFT OUTER JOIN `ifalist` ON `amwplist`.`IFA_ID` = `ifalist`.`IFA_ID`
LEFT OUTER JOIN `cdalist` ON `stationlist`.`CDA_ID` = `cdalist`.`CDA_ID`
LEFT OUTER JOIN `cfalist` ON `amwplist`.`CFA_ID` = `cfalist`.`CFA_ID`
LEFT OUTER JOIN `workstatuslist` ON `amwplist`.`Status_ID` = `workstatuslist`.`Status_ID` " .
$WhereCondition . " " .
"ORDER BY substring_index(amwplist.Work_ID_by_MoD, '/', 1), CONVERT(substring_index(amwplist.Work_ID_by_MoD, '/', -1), UNSIGNED INTEGER)
";
$tableRow = '<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
//var_dump($conn);
while ($row= mysqli_fetch_array($result)) {
//$idnumber = CONVERT(substring_index($row['Work_ID_by_MoD'], '/', -1), UNSIGNED INTEGER);
$tableRow = $tableRow . '<tr>' ;
$tableRow = $tableRow . '<td>'. $row['Category_Type'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Station'] . '</td>';
$trow = $row['Work_ID_by_MoD'];
//var_dump($trow);
//var_dump('<td><input type="button" name= "' . $row['Work_ID_by_MoD'] . '" value= "' . $row['Work_ID_by_MoD'] . '" id= "' . $row['Work_ID_by_MoD'] . '" class="btn btn-info btn-xs view_data" /></td>');
$tableRow = $tableRow . '<td><input type="button" name= "' . $trow . '"' . 'value= "' . $trow . '" id= "' . $trow . '" class="btn btn-info btn-xs view_data" /></td>';
$tableRow = $tableRow . '<td>'. $row['Nomenclature'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Cost'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Status_Type'] . '</td>';
$tableRow = $tableRow . '</tr>';
}
$tableRow = $tableRow . '</tbody>';
$tableRow = $tableRow . "<script>$('.view_data'" . ").click(function(){
var employee_id = $(this).attr('id');
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal('show');
});
</script>";
//var_dump($tableRow);
echo ($tableRow);
$conn->close();
ob_end_flush();
?>
请不要在循环结束时追加。这也是诀窍。