![](/img/trans.png)
[英]JQuery HTML onclick attribute on button not working after Ajax load
[英]OnClick not working after adding ajax in jquery
我已經創建了一個頁面,它有一個選擇框,用於過濾下面的表中的結果。 選擇框使用ajax過濾結果。在ajax調用后加載的表的一列中有一個按鈕,單擊該表時應在頁面中添加div。 當表是靜態的,並且帶有添加div的靜態按鈕時,此按鈕的onclick正常工作,現在通過ajax加載表,該按鈕不起作用,它不添加之前添加的div。 有人可以指出問題,我是jquery和ajax的初學者
這是我的代碼:
(function ( $ ) {
$(document).ready(function(){
var itemsArr = [];
$(".btn-add").on("click",function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".this-name").text(); // Find the text
// Let's test it out
$('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button">X</a></div>');
itemsArr.push($text);
//alert(itemsArr);
console.log("added");
$("#items").val(JSON.stringify(itemsArr));
});
function getAll(){
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: 'action=showAll',
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
}
getAll();
// function to get all records from table
// code to get all records from table via select box
$("#brands").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: dataString,
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
});
});
$(document).on('click','.delete-button', function(e){
e.preventDefault();
//alert('yes');
$(this).closest('.item').remove();
});
}( jQuery ));
HTML是:
<tbody>
<tr bgcolor="#238efb" color="white">
<td style="text-align: center; color: #fff;"><strong>ID</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Code</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Name</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Brand</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Button</strong></td>
</tr>
<?php
while($row = mysql_fetch_array($comments, MYSQL_ASSOC))
{
$id = $row['id'];
$name = $row['code'];
$level = $row['name'];
$number = $row['brand'];
?><tr>
<td class="this-id" style="text-align: center;"><?php echo $id;?></td>
<td class="this-name" style="text-align: left; padding-left: 15px;"><?php echo $name;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $level;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $number;?></td>
<td style="text-align: left; padding-left: 15px;"><button class="btn-add">Add Item</button></td>
</tr><?php
}
mysql_close($con);
?>
</tbody>
</table>
對於觸發AJAX的選擇框:
<div class="searchbar">
<select name="brands" id="brands">
<option value="showAll" selected="selected">Show All Products</option>
<?php $querybrand = "SELECT DISTINCT brand FROM q1h27_data ";
$commentsbrand = mysql_query($querybrand);
while($row = mysql_fetch_array($commentsbrand, MYSQL_ASSOC))
{
//print_r($row['brand']);?>
<option value="<?php echo $row['brand']; ?>"><?php echo $row['brand']; ?></option>
<?php } ?>
</select>
</div>
使用以下內容:
$(document).ready(function(){
var itemsArr = [];
$(document).on('click','.btn-add',function() {
// code goes here.....
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.