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 に答える