删除不工作

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来，你是动态追加。