動態的OnClick按鈕事件

Question

我有一個動態創建的表，我想在每行中放置一個帶有onclick事件的EDIT / DELETE按鈕。

但是，我不知道如何使它們與行的ID唯一，然后對每個ID進行onclick事件，以便更新/刪除行中的值。

我試過了：

<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." VALUE='Delete'>

但是我不知道如何告訴這個事件：

$('what to write here?').click(function() {

});

編輯：

按鈕的創建有效，但onclick事件無效。 代碼如下：

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).attr('id');
                    var p_edit_id = $('input[name=P_NAME_EDIT]');
                    (p_edit_id).val(e_id);
                    alert("aaa");
                    });

onclick事件應使用ID填充文本框並發布警報。

Answer 1

一種想法是改變

<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID="'.$row['alpha_p_ID'].'" VALUE='Delete'>

至

echo '<INPUT TYPE="BUTTON" NAME="EDIT_PRODUCT_FROM_SEARCH" ID=".$row['alpha_p_ID']." 
onclick="your_js_delete_function('.$row['alpha_p_ID'].');" VALUE="Delete">'

然后在JS中

function yourj_s_delete_function(id) {
  //do something
  // you could also id = $(this).attr('id');
}

您還可以分配一個類別，以便您

$('what to write here?').click(function() {

});

變

$('.delete_button').click(function() {
   var id = $(this).attr('id');
   .... rest of the code
});

注意：如果您的$row['alpha_p_id']返回一個數字值，則最好將字符串值作為前綴添加，因為只有數字ID會導致標記驗證失敗

因此，您可以將ID="'.$row['alpha_p_ID'].'"更改為ID="btn_'.$row['alpha_p_ID'].'"

而你需要改變

var id_str = $(this).attr('id');
var id=id_str.split("_", 1);

UPDATE

如前所述，這些按鈕是動態創建的-您需要使用on()方法而不是`click-

$('.delete_button').on("click", function(event){
    alert("I am clicked!");
});

http://api.jquery.com/on/

Answer 2

您可以將事件綁定到所有input[type="button"] ，然后從另一個屬性獲取ID值。 例如：

$('input[type="button"]').click(function() {
    $id = $(this).id;
    $action = $(this).val();
});

Answer 3

您可以使用jQuery的attr（）方法訪問生成事件的元素的ID。

<input class='mybutton' type='button' name='edit_product_from_search' id=".$row['alpha_p_id']." value='delete'>

並在jQuery代碼中：

$('.mybutton').click(function() {
    id = $(this).attr('id');
});

jQuery中的$（this）指生成事件的元素。

Answer 4

如果給輸入一個類，則可以使用選擇器

var buttons = $('.classname');

使用這一系列按鈕，您應該能夠：

$.each(buttons, function(){
    $(this).click(function(){
         // Click event here
    }
});

Answer 5

$("#<?php print $row['alpha_p_ID'] ?>").click(function() {

});

Answer 6

或將屬性class =“ delete”添加到按鈕

<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." class="delete" VALUE='Delete'>

接着

$('.delete').click(function(){
  id = $(this).attr('ID');

  // delete code goes here...

});