버튼 추가/jQuery 원인 버튼 제출

Question

테이블에 행을 추가하고 있습니다. 잘 작동하지만 행에 click()이 붙은 버튼이 포함되어 있습니다. 행을 추가 할 때마다 버튼이 실행됩니다. 그것은 당신의 원하는 기능이 설명에서하지만 나는 당신이 무슨 말을 하려는지 알 수 있다고 생각 그것을 통해 몇 번가는 것을 알아 내기 위해 조금 어렵다

<script> 
 
//adds row to table 
 
$('#btnSAS').click(function (e) { 
 
    $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></tr>'); 
 
}); 
 

 
    
 
//delete row 
 
$('button').click(function() { 
 
    alert('delete'); 
 
}); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Header</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></td> 
 
    </tr> 
 
</table> 
 
<button class="btn btn-default btn-sm" id="btnSAS" type="button">Add Row<span class="glyphicon glyphicon-plus" aria-hidden="true"></span

Answer 1

여기를 참조하십시오 해야 할 것.

삭제 기능 $('button')을 사용하여 문서의 모든 버튼을 처리하고 있지만 새 행이 추가되면 업데이트되지 않습니다. 대신 테이블 내부에있는 버튼에 클릭 리스너를 적용 해보십시오.

//adds row to table 
$('#btnSAS').click(function (e) { 
    $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</button></td></tr>'); 
}); 


//delete row 
$('table').on('click', 'button', function() { 
    alert('delete'); 
}); 

또한 당신의 HTML 형식이 잘못하고 <button>에 대한 닫는 태그를 포함하지 않으며, 또한 추가하고 불필요한 </td> 태그가 있습니다.

http://jsfiddle.net/ow3b6pjf/15/

Answer 2

당신은 "행 추가"버튼을 포함 에 모든 버튼을 핸들러를 부착하고 있습니다 : 여기

업데이트 된 바이올린 그래서

$('button').click(function (e) { 
    alert('delete'); 
}); 

, 그것은이 아니다 버튼을 누르지 만 "행 추가"버튼 자체가 표시됩니다. $('#btnSAS').click() 처리기와 $('button').click() 처리기는 모두 "행 추가"단추에 적용되므로 둘 다 적용됩니다.

당신은 단지 테이블 버튼에 대한 핸들러 적용되는 문제는 실제로 문제를 해결 편집하기 전에

귀하의 코드 :

$('button').click(function (e) { 
    alert('delete'); 
}); 

그러나을 다른 사람들이 지적으로,이에만 적용됩니다 (페이지가로드 될 때) 핸들러를 지정할 때 존재하는 버튼에 연결합니다.

이것은 jQuery와 공통적 인 혼동입니다. 처리기는 DOM에있는 것 (웹 페이지에 이미 있음)에만 적용 할 수 있습니다.

대용량을 사용하여 (클릭 수를 감시하기 위해 기존 요소를 할당하는) 방법이 있습니다. 이 경우, table 요소에 위임 핸들러를 할당하고, 그 때 버튼에서 유래 여부에 따라 클릭 필터링 할 수 있습니다

이 경우

$('table').on('click', 'button', function() { 
    alert('delete'); 
}); 

표에 유래 어떤 클릭을 필터링을 'button' 선택기에 대해 처리 된 다음 필터링 된 결과에 대한 처리기가 호출됩니다.

바이올린 : http://jsfiddle.net/ow3b6pjf/16/