如何在Jquery中向表行添加按钮

我正在为一家酒吧准备一份又快又脏的收银员申请表

当用户单击饮料类型的按钮时，一行被添加到表中，带有+和-以允许用户更改数量

$(".drinkButton").click(function() {

    var destTable = $("#trTable");
    var drinkID = $(this).attr("id");

    switch (drinkID) {
    case 'becks':
        var dName = "Becks";
        var dPrice = "3.00";
        break;
    case 'corona':
        var dName = "Corona";
        var dPrice = "3.00";
        break;
    }

    var newRow = $("<tr><td>" + dName + 
                           "</td><td>" + dPrice + "</td><td>1</td> \
                           <td><input id='Button' type='button' value='-' class='minusButton' /></td> \
                           <td><input id='Button' type='button' value='+' class='plusButton' /></td> \
                           <td>" + dPrice + "</td> \
                  </tr>");

$("#trTable").append(newRow);
    $(this).attr('disabled', 'disabled');
});

$(".plusButton").click(function() {
    alert('Plus Button Clicked');
});​

$（“.drinkButton”）。单击（函数（）{
var destTable=$（“#trTable”）；
var drinkID=$（this.attr（“id”）；
开关（drinkID）{
“贝克”案：
var dName=“贝克”；
var dPrice=“3.00”；
打破
“科罗纳”案：
var dName=“Corona”；
var dPrice=“3.00”；
打破
}
var newRow=$（“”+dName+
“+dPrice+”1\
\
\
“+dPrice+”\
");
$（“#trTable”）.append（newRow）；
$（this.attr（'disabled'，'disabled'）；
});
$（“.plusButton”）。单击（函数（）{
警报（“单击了加号按钮”）；
});​

这是可行的，但是添加的加号和减号按钮不会触发事件

---

我做错了什么？

您的代码不起作用，因为使用

单击添加的事件或
绑定添加的事件只对当前
DOM
执行一次，并且只对以后添加的元素执行一次，您可以在添加新的
.plusButton
时重新绑定事件，或者在
上使用
，这会自动帮你解决

$(".plusButton").live('click', function() {
    alert('Plus Button Clicked');
});​

//Or

$(".plusButton").on('click', function() {
    alert('Plus Button Clicked');
});​


您的代码不起作用，因为使用
单击
或
绑定
添加的事件仅对当前
DOM
执行一次且仅对以后添加的元素执行一次，您可以在添加新的
.plusButton
时重新绑定事件，也可以在
上使用
，这会自动帮你解决


创建newRow元素后，可以像这样绑定click事件：

$('.plusButton', newRow).click(function() {
    alert('Plus Button Clicked');
});

编辑：
您还可以在
委托事件处理程序上使用
，如NiftyDude的帖子所示。
live
已被弃用，应改为使用
上的
（感谢VisioN指出这一点）
在创建newRow元素后，您可以这样绑定单击事件：

$('.plusButton', newRow).click(function() {
    alert('Plus Button Clicked');
});

编辑：
您还可以在
委托事件处理程序上使用
，如NiftyDude的帖子所示。
live
已被弃用，应改用
上的
（感谢VisioN指出这一点）
问题是在加载页面后添加dom对象（表），并在该dom对象上添加单击事件。它将不起作用，因为在激发$（document）.ready（）时，dom对象不存在。因此，您可以使用下面给出的两种解决方案中的任何一种

$(".plusButton").on('click', function() {
    alert();
}); 

$(".plusButton").live('click', function() {
    alert();
});​

​
 问题是在加载页面后添加dom对象（表），并在该dom对象上添加click事件。它将不起作用，因为在激发$（document）.ready（）时，dom对象不存在。因此，您可以使用下面给出的两种解决方案中的任何一种

$(".plusButton").on('click', function() {
    alert();
}); 

$(".plusButton").live('click', function() {
    alert();
});​

​
 这两个变体的行为不同。这两个变体的行为不同。
live
是不推荐使用的方法。在上考虑使用<代码>。对，忘了这个。实际上我不再使用它了。
live
是不推荐使用的方法。在上考虑使用<代码>。对，忘了这个。实际上，我不再使用它了。这应该放在.drinkButton函数内部还是后面？这应该放在.drinkButton函数内部还是后面？