[英]Dynamic OnClick Button Event
我有一个动态创建的表,我想在每行中放置一个带有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填充文本框并发布警报。
一种想法是改变
<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!");
});
您可以将事件绑定到所有input[type="button"]
,然后从另一个属性获取ID值。 例如:
$('input[type="button"]').click(function() {
$id = $(this).id;
$action = $(this).val();
});
您可以使用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)指生成事件的元素。
如果给输入一个类,则可以使用选择器
var buttons = $('.classname');
使用这一系列按钮,您应该能够:
$.each(buttons, function(){
$(this).click(function(){
// Click event here
}
});
$("#<?php print $row['alpha_p_ID'] ?>").click(function() {
});
或将属性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...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.