如何在Jquery中添加按鈕到表格行

我正在整理一個快速和骯髒的應用程序直到酒吧。如何在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'); 
});

此方法可行，但添加的加號和減號按鈕不會觸發事件。

我在做什麼錯？

來源

2012-05-25 Ben

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

//Or 

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

來源

2012-05-25 11:04:25 Thulasiram

這兩個變種不同的表現。 – VisioN

您的代碼不起作用，因爲事件中使用click或bind都只有一次，只爲當前DOM而不是後來添加的元素加入執行，你可以重新綁定，只要添加新.plusButton的情況下，或使用on，這將自動爲您處理。

docs

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

來源

2012-05-25 11:04:46

您創建NEWROW元素剛過，您可以點擊綁定事件是這樣的：

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

編輯： 你也可以使用一個on委派的事件處理程序如NiftyDude的帖子所示。 live已過時，on應該使用（感謝眼光指出這個）

來源

2012-05-25 11:08:30 Jeremyfa

'live'是不推薦使用的方法。考慮使用'on'代替。 – VisioN

對，忘了這個。實際上我不再使用它了。 – Jeremyfa

的問題是您要添加的頁面加載後，一個DOM對象（表）和DOM對象添加click事件。它不會工作，因爲當$（document）.ready（）發起那個dom對象不存在時。所以你可以使用下面給出的兩種解決方案。

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

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

來源

2012-05-25 11:11:35

這應該進入.drinkButton函數內部還是之後？ – Ben

如何在Jquery中添加按鈕到表格行

回答

相關問題