在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.....
  });
}