Question

我准备了一个快速和肮脏的,直到申请酒吧。

当用户单击饮料类型的按钮时,会将一行加到表格中,并加上一个+和 - 以使用户能够更改数量。

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

此功能有效, 但添加的增减按钮不会点燃事件。

我做错什么了?

Answer 1

您的代码不起作用, 因为使用 kick 或 under > 或 unbind 添加的事件只执行一次, 并且只对当前 DOM 执行一次, 而对于以后添加的元素, 您可以在添加新的 . plus button 时重置事件, 或者使用 on , 这将自动为您处理此事。



"http://api.jquery.com/on/" rel="no follow">docs 

$(document).on( click ,  .plusButton , function() {
   // alert etc
});

Answer 2

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

//Or

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

Answer 3

问题是您正在加载页面后添加一个 DOM 对象( 表), 并在该 DOM 对象上添加单击事件。它不会工作, 因为$( document) 发射该 dom 对象时$. ready () 没有出现。因此您可以使用下面给出的两个解决方案中的任何一个。

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

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

调

Answer 4

在您创建了您的新Row元素之后, 您可以像这样绑定点击事件 :

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

Edit: You can also use a on delegated event handler as shown in NiftyDude s post. live is deprecated, on should be used instead (thanks VisioN for pointing out this)

友情链接