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

clickを使用して追加されたイベントまたは後で追加された要素ではなくbind、現在の要素に対してのみ一度だけ実行されるため、コードが機能しません。新しいものが追加さDOMれるたびにイベントを再バインドするか、それを処理する を使用できます自動的。.plusButtonon

ドキュメント

$(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 要素を作成した直後に、次のようにクリック イベントをバインドできます。

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

編集:on NiftyDude の投稿に示されているように、委任されたイベント ハンドラーを 使用することもできます。liveは非推奨であり、on代わりに使用する必要があります (これを指摘してくれた VisioN に感謝します)

于 2012-05-25T11:08:30.903 に答える
0

問題は、ページが読み込まれた後に dom オブジェクト (テーブル) を追加し、その dom オブジェクトにクリック イベントを追加していることです。$(document).ready() が起動したときに dom オブジェクトが存在しなかったため、機能しません。したがって、以下に示す2つのソリューションのいずれかを使用できます。

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

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

</p>

于 2012-05-25T11:11:35.297 に答える