Javascript 动态OnClick按钮事件_Javascript_Onclick_Dynamic Data

Javascript 动态OnClick按钮事件

javascript

Javascript 动态OnClick按钮事件,javascript,onclick,dynamic-data,Javascript,Onclick,Dynamic Data,我有一个动态创建的表，我想在每行中放置一个带有onclick事件的编辑/删除按钮但是，我不知道如何使它们与行的id唯一，然后为每个行生成onclick事件，以便更新/删除行中的值我试过： <INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." VALUE='Delete'> 编辑：按钮的创建可以工作，但onclick事件不能。代码如下： PHP按钮代码 results_tab

我有一个动态创建的表，我想在每行中放置一个带有onclick事件的编辑/删除按钮

但是，我不知道如何使它们与行的id唯一，然后为每个行生成onclick事件，以便更新/删除行中的值

我试过：

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

编辑：

按钮的创建可以工作，但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事件应使用id填充文本框并发布警报

您可以将事件绑定到所有

输入[type=“button”]

，然后从另一个属性获取ID值。例如：

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

您可以将事件绑定到所有

输入[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中是指生成事件的元素。

您可以使用jQuery的attr（）方法访问生成事件的元素的ID

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

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

如果给输入一个类，则可以使用选择器

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

var buttons = $('.classname');

使用此按钮阵列，您应该能够执行以下操作：

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

如果给输入一个类，则可以使用选择器

var buttons = $('.classname');

使用此按钮阵列，您应该能够执行以下操作：

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

一个想法是改变

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

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

您还可以指定一个类，以便

$('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\u p\u ID']”更改为ID=“btn”.$row['alpha\u p\u ID']”。

你需要改变
<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID="'.$row['alpha_p_ID'].'" VALUE='Delete'>

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

更新
正如您提到的，这些按钮是动态创建的-您需要使用on（）
方法，而不是“单击-
$('.delete_button').on("click", function(event){
    alert("I am clicked!");
});

一个想法是改变
<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID="'.$row['alpha_p_ID'].'" VALUE='Delete'>

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

您还可以指定一个类，以便
$('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\u p\u ID']”更改为ID=“btn”.$row['alpha\u p\u ID']”。

你需要改变
<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID="'.$row['alpha_p_ID'].'" VALUE='Delete'>

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

更新
正如您提到的，这些按钮是动态创建的-您需要使用on（）
方法，而不是“单击-
$('.delete_button').on("click", function(event){
    alert("I am clicked!");
});

$（“#”）单击（函数（）{
});
$（“#”）点击（函数（）{
});
或向按钮添加属性class=“delete”
<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." class="delete" VALUE='Delete'>

或者向按钮添加属性class=“delete”
<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." class="delete" VALUE='Delete'>

据我所知，编写大写的html标记和属性已经过时了。不要创建多个函数，而是创建一个将处理对象的函数，单击该函数：函数测试（obj）
。在input
addonclick=“test（this）”
中，就我所知，将html标记和属性大写已经过时了。不要创建多个函数，而是创建一个将处理对象的函数，单击该函数：函数测试（obj）
。在input
中添加onclick=“test（this）”
。我明白了。但这是一个使用全局“所有按钮”而不是每个按钮本地的解决方案。我认为对于许多元素使用单个事件处理程序更好：它的主要好处是独立于HTML。如果在后期添加更多按钮，则无需分配新的处理程序；事件处理程序将自动知道有一个新按钮可以处理事情。我同意您的观点，即处理的事情越少越好，但在这种情况下，我需要在本地优先使用按钮。我明白了。但这是一个使用全局“所有按钮”而不是每个按钮本地的解决方案。我认为对于许多元素使用单个事件处理程序更好：它的主要好处是独立于HTML。如果在后期添加更多按钮，则无需分配新的处理程序；事件处理程序将自动知道有一个新按钮可以处理事情。我同意你的观点，即处理的事情越少越好，但在这种情况下，我需要在本地优先使用按钮。这正是我想要的。太棒了，我要试试。非常感谢。我发布的按钮代码来自一个php do while循环，我只是不理解id部分，所以我没有发布php代码。仍然感谢你澄清它，我不确定它是否工作，我只是把一个警报测试，没有警报显示。我试着用一个按钮提醒，没有提醒。从动态创建的按钮发出警报不起作用？如果是动态生成的按钮，请按照我在更新中提到的那样尝试。我认为事件不起作用，因为按钮是在while循环中创建的。这是目前唯一符合我逻辑的东西。如果不是这样，我就找不到别的了。同一页面上的测试按钮可以处理任何代码，动态按钮不喜欢任何代码，即使它将静态值作为id传递也不喜欢。我没有解决方案。如果您将代码发布到生成这些按钮的位置，我会查看。这正是我要查找的内容。太棒了，我要试试。非常感谢。我发布的按钮代码来自一个php do while循环，我只是不理解id部分，所以我没有发布php代码。仍然感谢你澄清它，我不确定它是否工作，我只是把一个警报测试，没有警报显示。我试着用一个按钮提醒，没有提醒。从动态创建的按钮发出警报不起作用？如果是动态生成的按钮，请按照我在更新中提到的那样尝试。我认为事件不起作用，因为按钮是在while循环中创建的。这是目前唯一符合我逻辑的东西。如果不是这样，我就找不到别的了。这个