php - 在 jquery 中添加 ajax 后 OnClick 不起作用

Question

我创建了一个页面，它有一个选择框，用于过滤其下方表格中的结果。选择框使用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>

Answer 1

使用以下内容:

$(document).ready(function(){
    var itemsArr = [];
  $(document).on('click','.btn-add',function() {
    // code goes here.....
  });
}