Jquery의 테이블 행에 버튼을 추가하는 방법

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

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

//Or 

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

Answer 2

이벤트가 한 번만 만 나중에 추가 요소에 대한 현재 DOM하지에 대해 실행되는 click 또는 bind을 사용하여 추가하기 때문에 귀하의 코드는 새 .plusButton가 추가 될 때마다 이벤트를 바인딩 할 수 있습니다 작동하지 않습니다, 또는 on을 사용하면 자동으로 처리됩니다.

docs

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

Answer 3

당신이 당신의 newRow 요소를 만든 직후,이 같은 클릭 이벤트를 바인딩 할 수 있습니다 :

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

편집 : 당신은 또한 on 위임 이벤트 핸들러를 사용할 수 있습니다 NiftyDude의 게시물에 나와 있습니다. 사용되지 않습니다 live, on이 문제는 페이지가로드 된 후 DOM 객체 (테이블)를 추가하고 DOM 객체에 클릭 이벤트를 추가하는 것입니다

Answer 4

(이 지적에 대한 감사의 비전) 대신에 사용되어야한다. $ (document) .ready()가 dom 객체가 없다면 실행되지 않기 때문에 작동하지 않습니다. 따라서 아래에 제시된 두 가지 솔루션 중 하나를 사용할 수 있습니다.

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

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