OnClick not working after adding ajax in jquery

Question

I have created a page, it has a select box which is used for filtering the results in a table below it. The select box is using ajax to filter results.The table which is loaded after ajax call has a button in one column, on its click a div should be added in the page. The onclick for this button was working fine when the table was static with static button to add div, now the table is being loaded through ajax the button doesn't work, it doesn't add the div that it was adding before. Can someone point out the problem please, I am a beginner in jquery and ajax

here is my code:

(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 is :

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

For selectbox that triggers 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

Use the following:

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