0

我正在整理一份快速而肮脏的酒吧申请。

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

$(".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');
});​

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

我究竟做错了什么？

4

4 回答 4

3

您的代码不起作用，因为使用添加的事件clickorbind仅执行一次并且仅针对当前DOM而不是稍后添加的元素，您可以在.plusButton添加新事件时重新绑定事件，或者使用on，这将为您处理自动地。

文档

$(document).on('click', '.plusButton', function() {
   // alert etc
});
于 2012-05-25T11:04:46.860 回答
1 
$(".plusButton").live('click', function() {
    alert('Plus Button Clicked');
});​

//Or

$(".plusButton").on('click', function() {
    alert('Plus Button Clicked');
});​
于 2012-05-25T11:04:25.423 回答
0

在你创建了你的 newRow 元素之后，你可以像这样绑定 click 事件：

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

编辑： 您还可以使用onNiftyDude 的帖子中所示的委托事件处理程序。 live已弃用，on应改为使用（感谢 VisioN 指出这一点）

于 2012-05-25T11:08:30.903 回答
0

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

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

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

​</p>

于 2012-05-25T11:11:35.297 回答