刪除不工作

Question

我有如下一個HTML表單一個jQuery生成的字段：

<div class="form_row">Add Note<input type="checkbox" name="add_note" id="add_note"></div> 
    <div class="form_row" id="addDiv" style="display:none;"> 
     <div class="form_row"> 
      <h4><a href="#" id="addScnt">Add Another Input Box</a></h4> 
      <div id="p_scents"> 
       <p> 
        <label for="p_scnts"><input type="text" size="20" name="p_scnt_1"/></label> 
       </p> 
      <div id="new_notes"> 
     </div> 
    </div> 
</div> 

和JavaScript是：

$('#add_note').click(function(){ 
    if($("input[type='checkbox'][name='add_note']:checked").length > 0) 
    { 
    $('#addDiv').show(500); 
    }else{ 
    $('#addDiv').hide(200); 
    } 
}) 

    var i = 2; 
$('#addScnt').click(function(){ 

    var html = ''; 
    html += '<p>'; 
    html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" id="cancel_field">Cancel</a></label>'; 
    html += '</p>'; 

    $('#new_notes').append(html); 

    i++; 
    }); 
    $('#cancel_field').click(function(){ 
    alert('Test ') 
    $(this).parents('p').remove(); 
}); 

現在，我的問題是，當我點擊cancel，它確實沒有做任何事情，既不警告也不移除父分區。代碼有什麼問題？

編輯：

JSFiddle Demo

Answer 1

您需要委派，因爲它是一個動態生成的元素：

$('#new_notes').on("click", "#cancel_field", function() { ... 

請參閱更新的小提琴：http://jsfiddle.net/tka55/1/

而且，請注意，id在添加多個元素時應該是唯一的，否則您將再次陷入困境。

Answer 2

你可以試試這個，新增class="cancel_field"

 var i = 2; 
    $('#addScnt').click(function(){ 

     var html = ''; 
     html += '<p>'; 
     html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>'; 
     html += '</p>'; 

     $('#new_notes').append(html); 

     i++; 
     }); 
     $('.cancel_field').click(function(){ 
     alert('Test ') 
     $(this).parents('p').remove(); 
    }); 

Answer 3

當你已經加載之後添加元素的DOM，你必須differenlty約束他們，用bind或on jQuery函數。它們不包含在DOM準備好的事件綁定中。

所以，你應該做的：

var html = ''; 
     html += '<p>'; 
     html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>'; 
     html += '</p>'; 

     $('#new_notes').append(html); 

     i++; 
     }); 
     $('.cancel_field').on('click',function(){ 
     alert('Test ') 
     $(this).parents('p').remove(); 

Answer 4

你將不得不使用onclick爲that.If你使用點擊監聽器不會被附加到添加的元素。

看到這個小提琴：

http://jsfiddle.net/A6Q5C/

$('#new_notes').on('click','#cancel_field',function(){}); 

當您使用on的你將其連接到父div來，你是動態追加。