Javascript 事件侦听器在表刷新后不活动
我在表上有一个事件侦听器，用于在单击时指示行的当前ID。 当最初单击行时，它工作得很好，但是当下拉列表更改后触发ajax并刷新表时，事件侦听器就不再工作了。为什么? 初始文件：Javascript 事件侦听器在表刷新后不活动,javascript,php,ajax,dom-events,Javascript,Php,Ajax,Dom Events,我在表上有一个事件侦听器，用于在单击时指示行的当前ID。 当最初单击行时，它工作得很好，但是当下拉列表更改后触发ajax并刷新表时，事件侦听器就不再工作了。为什么? 初始文件： <?php //load_data_select.php $connect = mysqli_connect("localhost", "re", "", "test"); function fill_brand($connect) { $output = '';
<?php
//load_data_select.php
$connect = mysqli_connect("localhost", "re", "", "test");
function fill_brand($connect)
{
$output = '';
$sql = "SELECT * FROM brand";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["brand_id"].'">'.$row["brand_name"].'</option>';
}
return $output;
}
function fill_product($connect)
{
$output = '<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="mytable" name="table_1">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>BRAND ID</th>
</tr>';
$sql = "SELECT * FROM product";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<div class="col-md-3">';
$output .= '<tr>
<td id="'.$row["product_id"].'">'.$row["product_id"].'</td>
<td id="'.$row["product_id"].'">'.$row["product_name"].'</td>
<td id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
</tr>';
}
$output .= '</table>';
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ok</title>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h3>
<select name="brand" id="brand">
<option value="">Show All Product</option>
<?php echo fill_brand($connect); ?>
</select>
<br /><br />
<div class="row" id="show_product">
<?php echo fill_product($connect);?>
</div>
</h3>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table = document.querySelector('#mytable');
// listen for a click
table.addEventListener('click', function (ev) {
var serviceID = ev.target.id;
alert(serviceID);
})
$('#brand').change(function(){
var brand_id = $(this).val();
$.ajax({
url:"load_data.php",
method:"POST",
data:{brand_id:brand_id},
success:function(data){
$('#show_product').html(data);
}
});
});
});
</script>
好啊
展示所有产品
$（文档）.ready（函数（）{
var table=document.querySelector（“#mytable”）；
//听一听咔嗒声
表.addEventListener（'click'，函数（ev）{
var serviceID=ev.target.id；
警报（serviceID）；
})
$（'#brand'）.change（function（）{
var brand_id=$（this.val（）；
$.ajax（{
url:“load_data.php”，
方法：“张贴”，
数据：{brand_id:brand_id}，
成功：函数（数据）{
$（'show#u product'）.html（数据）；
}
});
});
});
<?php
//load_data.php
$connect = mysqli_connect("localhost", "re", "", "test");
$output = '';
if(isset($_POST["brand_id"]))
{
if($_POST["brand_id"] != '')
{
$sql = "SELECT * FROM product WHERE brand_id = '".$_POST["brand_id"]."'";
}
else
{
$sql = "SELECT * FROM product";
}
$result = mysqli_query($connect, $sql);
$output .= ' <style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="mytable">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>BRAND ID</th>
</tr>';
while($row = mysqli_fetch_array($result))
{
$output .= ' <tr>
<td id="'.$row["product_id"].'">'.$row["product_id"].'</td>
<td id="'.$row["product_id"].'">'.$row["product_name"].'</td>
<td id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
</tr>'; }
$output .= '</table>';
echo $output;
}
?>