Question

I have a table with a header and an empty body:

<table style="width:50%;" class="adminlist">
<thead>
<tr>
<th style="width:80%;">Number</th>
<th style="width:20%;">Quantity</th>
<th style="width:20%;"></th>
</tr>
</thead>
<tbody id="body_orderproducts">
<tr style="background-color: rgb(170, 170, 170);">                      <td class="kmx_nodata" colspan="3">NO DATA.</td>
</tr>
</tbody>
</table>

Now, I load the data and fill the tbody with an ajax function:

var baseurl = '<?php echo HtmlHelper::getComponentPath(true); ?>';
var urlquery_ajax = '<?php echo RouteHelper::urlQueryWithRawAndToken('order&task=');?>';
var order_id = <?php echo $this->item->id;?>;
var kmx = jQuery.noConflict();
kmx().ready(function() {
/**
* Ajax call to load the products linked to the order
*/
function loadTableProducts() {
    var myProductTableBody = kmx('#body_orderproducts');
    myProductTableBody.empty();
    kmx.ajax({
        type: "POST",
        url: baseurl,
        cache: false,
        data: urlquery_ajax + "getOrderProductsInJsonFormatAjax&order_id=" + order_id,
        success: function(data){
                    data = kmx.parseJSON(data);
                    var myProductTableBody = kmx('#body_orderproducts');
                    populateTable(myProductTableBody, data);
                 },
         failure: function(msg){
                    msg = kmx.trim(msg);
                    alert('Error: ' + msg.responseText);
                  }
    });
}
/**
* Populate the table
*/
function populateTable(myTBodyObj, myData) {
    if (myData.rows.length > 1) {
        kmx.each(myData.rows, function(index,item) {
            myTBodyObj.append('<tr><td>' + item.number + '</td><td align="right">' + item.quantity + '</td><td><img id="delete_product_' + item.id + '" name="delete_product_' + item.id + '" class="kmx_image_delete" alt="<?php echo JText::_( 'Delete this product'); ?>" src="components/com_cmpningbo/assets/images/delete.png" /></td></tr>');
        });
    }
    else {
        myTBodyObj.append('<tr><td colspan="2" class="kmx_nodata"><?php echo JText::_( 'NO DATA.'); ?></td></tr>');
    }
    return;
}}
loadTableProducts();
});

Everything works fine and the result is something like:

Now, I want to add a code to handle the event on click on the image “delete”:

kmx('img[name^="delete_product_"]').live('click', function() {
        alert('click');
        return false;
    });

Each “delete” image has an id and name like: delete_product_XX, where XX is the ID of the record to delete.
That code doesn’t work when the table body is loaded in ajax but it works when the table body is loaded on the page loading (no ajax).
I already checked about this problem and it seems that there is a problem with live about the images? I don’t know how to solve that? Any idea?

Answer 1

Since you already have a common class on all the delete buttons, you can just create a delegated event handler like this to handle them all with one event handler:

kmx("#body_orderproducts").on('click', '.kmx_image_delete', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});

To make the delegated event handling work for dynamically created objects, you set the first selector to a static parent object that is not dynamically created (that exists at the time you run the code to installed the event handlers) and you set the second selector to something that matches the dynamically create object.

FYI, .live() has been deprecated from all versions of jQuery. For jQuery 1.7+, .on() is recommended. For jQuery before 1.7, .delegate() is recommended. This is because both .delegate() and .on() can be much more efficient than .live().

For versions of jQuery before 1.7, it would be this:

kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});