jqueryでajaxを追加した後でOnClickが機能しない

Question

私はページを作成しました。そのページの下にあるテーブルに結果をフィルタリングするための選択ボックスがあります。選択ボックスはajaxを使用して結果をフィルタリングしています。ajax呼び出しの後にロードされるテーブルには、あるカラムにボタンがあり、そのクリックでdivがページに追加されます。このボタンのonclickは、テーブルがスタティックボタンで静的でdivを追加するときにうまくいきました。テーブルが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は次のとおりです。AJAXをトリガ選択ボックスについては

<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> 

：

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