Question

I am creating a table with information with ajax, echoing it with php. As last option I want to add edit/delete buttons that will fill empty textfields with information based on row ID of the product. Everything is ok, but the onclick events given to the dynamic buttons aren’t working at all.

AJAX request code

function search_product() {
                var ajaxRequest;

                    try {
                        //opera 8.0+, firefox, safari..
                        ajaxRequest = new XMLHttpRequest();
                        }
                        catch (e){
                        // internet explorer browsers
                        try {
                            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                            }
                            catch (e) {
                                try {
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                                    }
                                    catch (e) {
                                        //something went wrong
                                        alert("Your browser doesn't support ajax, which is needed for our website functionality. Please update your browser or install a new browser");
                                        return false;
                                                }
                                        }
                                }
                ajaxRequest.onreadystatechange = function() {
                if(ajaxRequest.readyState == 4) {
                var ajaxDisplay = document.getElementById('P_SEARCH_DIV_RESULTS');
                ajaxDisplay.innerHTML = ajaxRequest.responseText;
                                                }
                                                            }
                    var p_name = document.getElementById('P_SEARCHBAR').value;
                    var p_option = document.getElementById('P_SEARCH_SELECT').value;
                    var get_string = "?search="+p_name+"&option="+p_option;

                ajaxRequest.open("GET", "elcoma_search_product.php" + get_string, true);
                ajaxRequest.send(null);
                }

PHP button code

results_table = "<table cellspacing='0' style='border: 1px solid #405D99'><tr bgcolor='#405D99' style='color: white'><th>Main Image</th><th>Gallery Image 1</th><th>Gallery Image 2</th><th>Name</th><th>Type</th><th>Manufacturer</th><th>Quantity</th><th>Price-Wholesale</th><th>Price-Retail</th><th>Options</th></tr>";
while($row = mysql_fetch_array($results)){
$results_table .= "<tr>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_main']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_main']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_gal1']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_gal1']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_gal2']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_gal2']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_name_en]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_type]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_firm_owner]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_quantity]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_price_wholesale]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_price_retail]</td>";
$results_table .= "<td colspan='1' rowspan='1' bgcolor='#f7f7f7' align='center'>";
$results_table .= "<a href='#' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." CLASS='EDIT_BUTTON_CLASS'>Edit</a>";
$results_table .= "<a href='#' NAME='DEL_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." CLASS='DELETE_BUTTON_CLASS'>Delete</a>";
$results_table .= "</tr>";
}
echo "Query: " . $query . "<br />";
$results_table .="</table>";
echo $results_table;

Onclick:

                        $('.EDIT_BUTTON_CLASS').on("click", function(event) {
                    var e_id = this.id;
                    var p_edit_id = $('input[name=P_NAME_EDIT]');
                    (p_edit_id).val(e_id);
                    alert("aaa");
                    });

The test onclick should fill a textfield with the ID and post an alert. However, like explained nothing works.

Answer 1

Bind an event handler on document’s click event.
Then the click on '.EDIT_BUTTON_CLASS' will bubble and the document’s event handler will
determine that it’s an element for which the handler’s logic should be executed:

$(document).on("click", '.EDIT_BUTTON_CLASS', function(event) {
    var e_id = $(this).attr('id');
    var p_edit_id = $('input[name=P_NAME_EDIT]');
    (p_edit_id).val(e_id);
    alert("aaa");
});

DEMO

UPDATE – Event bubbling

As we can see on this picture, the click has been performed on the <img> element. This element has no own click event handler, but document has. So the event bubbles up and our document’s click event handler performs the check is the event target has a class 'EDIT_BUTTON_CLASS'. And if yes then it’s going to perform the declared operations.