Question

我正在创建一个包含ajax信息的表，用php回显它。作为最后一个选项，我想添加编辑/删除按钮，这些按钮将使用基于产品行ID的信息填充空文本字段。一切都很好，但是给动态按钮的onclick事件根本不起作用。

AJAX请求代码

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按钮代码

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

测试onclick应填充带有ID的文本字段并发布警报。但是，如同解释没有任何作用。

Answer 1

在文档的click事件上绑定事件处理程序。然后点击'.EDIT_BUTTON_CLASS'将会冒泡，文档的事件处理程序将会出现确定它是一个应该执行处理程序逻辑的元素：

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

更新 - 事件冒泡

enter image description here

正如我们在此图片中看到的，点击已在<img>元素上执行。此元素没有自己的单击事件处理程序，但文档具有。因此，事件起泡，我们的文档的点击事件处理程序执行检查，event target有一个类'EDIT_BUTTON_CLASS'。如果是，那么它将执行声明的操作。

动态按钮Onclick不起作用

1 个答案: