How to set jquery function for all of element in ajax response

Question

I have a function with an ajax code to get data from a table filter by username.

function showdata(){
var username  = $("#username").val(); // input:text element id = 'username'
$.ajax({
    type:"POST",
    url:"purchase_process.php",    
    data: "act=show&username=" + username,
    success: function(data){
        $("#show_data").html(data); // div element with id = 'show_data'
        $("#show_data").fadeIn(2000);
    }
});}

showdata();

$(".del_button").click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
var no = id.split('-');
var number= no[1];
var username  = $("#user_"+number).val();
var code  = $("#code_"+number).val();

$.ajax({
    type:"POST",
    url:"purchase_process.php",    
    data: "act=delete&username=" + username + "&code=" + code ,
    success: function(data){                 
        $("#info").html(data);  // div element id = info
        showdata(); 
    }  
}); });

And here is the ajax response from purchase_process.php that show all data in a table that each rows of the data have element show in a image (delete.png) to delete row :

<table id='purchase_table' name='purchase_table' border='0' class='table'>
    <thead>
        <tr><th><center>No.</center></th>
            <th><center>Part Number</center></th>
            <th><center>Part Name</center></th>
            <th><center>Location</center></th>
            <th><center>Qty</center></th>
            <th><center>Cost</center></th>
            <th><center>Subtotal</center></th>
            <th><center>Action</center></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width=70><center>$no</center></td>
            <td>
                <center>$r[part_code]</center>
                <input type=hidden id='user_$no' name='user_$no' maxlength=20 
                                   value='$_POST[username]' readonly>
                <input type=hidden id='part_$no' name='part_$no' maxlength=20 
                                   value='$r[part_code]' readonly>
            </td>
            <td>$r[part_name]</td>
            <td><center>$r[location]</center></td>
            <td><center>$r[qty]</center></td>
            <td><center>".number_format($r['cost'],2,",",".")."</center></td>
            <td><center>".number_format($subtotal,2,",",".")."</center></td>
            <td width=80><center>
                <a href='#' class='del_button' id='del-$no' name='del-$no'>
                    <img src='img/delete.png'>
                </a>
            </center></td>
        </tr>
    </tbody>
</table>

Function showdata() is running well but jquery function event:click for "a" element with class = "del_button" have no response whenever I click in image (delete.png) However if I make the same "a" element in that page, that jquery function running well. I assumed that jquery function don't get the "a" element value because that was called from ajax response.

Is there anyone can help me to solve this trouble? Thanks before...

use `on` or `delegate` functions, because these are live elements, instead `click` — vaso123, Nov 06 '14 at 14:33

score 1 · Accepted Answer · edited May 23 '17 at 11:49

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that you have to use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. As a matter of course you should delegate to the nearest parent that exists at the time of page load.

$(document).on('click', '.del_button', function(e) {

How to set jquery function for all of element in ajax response

1 Answers1