动态 OnClick 按钮事件
Posted
技术标签:
【中文标题】动态 OnClick 按钮事件【英文标题】:Dynamic OnClick Button Event 【发布时间】:2012-08-17 21:22:49 【问题描述】:我有一个动态创建的表,我想在每一行中放置一个带有 onclick 事件的 EDIT / DELETE 按钮。
但是,我不知道如何使用行的 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;
点击:
$('.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 填充文本框并发布警报。
【问题讨论】:
据我所知,将 html 标签和属性大写已经过时了。与其创建多个函数,不如创建一个可以处理您的对象的函数,单击该函数:function test(obj)
。并在input
添加onclick="test(this)"
。
【参考方案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);
更新
正如您提到的,这些按钮是动态创建的 - 您需要使用 on()
方法而不是 `click -
$('.delete_button').on("click", function(event)
alert("I am clicked!");
);
http://api.jquery.com/on/
【讨论】:
这几乎就是我想要的。棒棒哒,试试看谢谢你。我发布的按钮代码来自 php do while 循环,我只是不明白 id 部分所以我没有发布 php 代码。仍然感谢您澄清它 我不确定它是否正常工作,我发出警报只是为了测试,但没有显示任何警报。我只尝试了一个带有警报的按钮,没有警报。警报不适用于动态创建的按钮? 如果它是动态生成的按钮 - 然后按照我上面在更新中提到的尝试。 我认为该事件不起作用,因为按钮是在 while 循环中创建的。这是目前唯一符合我逻辑的东西。如果不是这样,我找不到其他任何东西。同一页面上的测试按钮适用于任何代码,动态按钮不喜欢任何代码,即使它传递一个静态值作为 id。我对此没有解决方案 如果您将代码发布在生成这些按钮的位置,我会查看。【参考方案2】:或者给按钮添加属性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...
);
【讨论】:
【参考方案3】:$("#<?php print $row['alpha_p_ID'] ?>").click(function()
);
【讨论】:
【参考方案4】:如果你给输入一个类,你就可以使用选择器
var buttons = $('.classname');
使用这一系列按钮,您应该可以做到:
$.each(buttons, function()
$(this).click(function()
// Click event here
);
【讨论】:
【参考方案5】:您可以使用 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');
);
$(this) 在 jQuery 中指的是产生事件的元素。
【讨论】:
【参考方案6】:您可以将事件绑定到所有input[type="button"]
,然后从另一个属性中获取ID值。例如:
$('input[type="button"]').click(function()
$id = $(this).id;
$action = $(this).val();
);
【讨论】:
我明白了。但这是一个使用全局“所有按钮”而不是本地每个按钮的解决方案。 我相信对许多元素使用单个事件处理程序会更好:这样做的主要好处是您独立于 HTML。如果稍后添加更多按钮,则无需分配新的处理程序;事件处理程序将自动知道有一个新按钮可以使用。 我同意你的观点,即少处理多,但在这种情况下,我需要优先考虑本地按钮的使用。以上是关于动态 OnClick 按钮事件的主要内容,如果未能解决你的问题,请参考以下文章