Jquery .clicked가 작동하지 않습니다.

Question

추가 버튼을 클릭하면 테이블 입력란에 다른 행을 추가하려고합니다. 여기

내 코드입니다 :

$("#add_ingr").click(function(){ 
    var row = '<tr>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_name[]', 'class' => 'ingr_name'); echo form_input($data); ?>' 
        +'</td>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_amount[]', 'class' => 'amt'); echo form_input($data); ?>' 
        +'</td>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_unit[]', 'class' => 'unit'); echo form_input($data); ?>' 
         +'<span class="remove">X</span>'+'</td>';                
       +'</tr>'; 

    $("#ingr_table > tbody").append(row); 

}); 내가 add_ingr의 ID로 요소를 클릭 할 때마다

새 행이 성공적으로 테이블에 추가 할 것입니다하지만 난 삭제의 클래스를 가지고있는 X의 텍스트를 클릭 할 때마다,이 코드가 실행되지 없구요 :

$("span.remove").click(function() { 
alert('clicked'); 
    $(this).parent().remove(); 
}); 

나는 무엇이 잘못되었으며 내 문제에 대한 해결책을 찾으려고 노력했지만 불행히도 일을 할 수는 없습니다.

누군가가 내게 무엇이 잘못되었는지 말해 줄 수 있습니까? 나는 정말로 당신의 도움에 감사 할 것입니다. 미리 감사드립니다.

Answer 1

클릭 핸들러가 요소에 바인딩되지 않았습니다. 하나에 코드를 변경 : 그것은 span.remove 항상 바인딩

$("span.remove").live('click', function() { 
    alert('clicked'); 
    $(this).closest('tr').remove(); 
}); 

있도록, 또는 배치 바인드를 내부에 다른 클릭 기능의 : 또한

$("#add_ingr").click(function(){ 
    var row = $('<tr>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_name[]', 'class' => 'ingr_name'); echo form_input($data); ?>' 
        +'</td>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_amount[]', 'class' => 'amt'); echo form_input($data); ?>' 
        +'</td>' 
        +'<td>' 
         +'<?php $data = array('name' => 'ingr_unit[]', 'class' => 'unit'); echo form_input($data); ?>' 
         +'<span class="remove">X</span>'+'</td>';                
       +'</tr>'); 

    $("#ingr_table > tbody").append(row); 
    row.find('span.remove').click(function() { 
    alert('clicked'); 
    $(this).closest('tr').remove(); 
    }); 
}); 
}); 

이 .parent()가 <td> 요소를 선택합니다, 그래서 이것을 가장 가까운 테이블 행을 선택하는 .closest('tr')으로 변경했습니다.