2

我正在使用 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;

点击：

                        $('.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 填充文本字段并发布警报。但是，就像解释的那样，没有任何效果。

4

1 回答 1

2

在文档的单击事件上绑定事件处理程序。然后点击'.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");
});

演示

更新 - 事件冒泡

在此处输入图像描述

正如我们在这张图片上看到的，点击已经在<img>元素上执行了。该元素没有自己的点击事件处理程序，但文档有。所以事件冒泡了，我们文档的点击事件处理程序执行检查是否event target有一个类'EDIT_BUTTON_CLASS'。如果是，那么它将执行声明的操作。

于 2012-08-25T13:16:06.160 回答