删除按钮不能正常工作

Question

在我的jQuery的，我有一个用于创建删除按钮一个按钮：

$("#add").click(function() { 
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn\" value=\"Remove\" />"); 
    removeButton.click(function() { 
     $(this).parent().remove(); 
    }); 

    fieldWrapper.append(removeButton); 
}); 

然而，当我添加一个删除按钮，使用PHP，无需手动jQuery的

<div class='fieldwrapper' id=<? echo "field".$counter ?> 
    <input type='button' id='remove' class='btn' value='Remove'> 
</div> 

我检查，如果fieldwrapper id不重叠，所以它为什么不工作？谢谢。

更新时间：

$(document).ready(function() { 
    $("#config").validate(); 

    $('#id').click(function() { 
     $(this).parent().remove(); 
    }); 

    $("#add").click(function() { 
     var intId = $("#configField div").length + 1; 
     var label = $("<label>Field Name:</label>"); 
     var labelType = $("<label>Field Type:</label>"); 
     var labelReq = $("<label>Require:</label>"); 
     var labelTag = $("<label>Tag:</label>"); 
     var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
     var fName = $("<input type=\"text\" name=\"Name" + intId + "\" class=\"required\" />"); 
     var fTag = $("<input type=\"text\" name=\"Tag" + intId + "\" class=\"required\" />"); 
     var fReq = $("<select class=\"required\" name=\"Req" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>"); 
     var fType = $("<select class=\"required\" name=\"Type" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>"); 
     var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />"); 

     fieldWrapper.append('<br>'); 
     fieldWrapper.append(label); 
     fieldWrapper.append(fName); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelType); 
     fieldWrapper.append(fType); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelReq); 
     fieldWrapper.append(fReq); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelTag); 
     fieldWrapper.append(fTag); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(removeButton); 
     $("#configField").append(fieldWrapper); 
    }); 

    $('.remove').on('click', function() { 
     $(this).parent().remove(); 
    }); 
}); 

PHP：

<div class='fieldwrapper' id=<? echo "field".$counter ?> 
    <input type='button' id='remove' class='btn remove' value='Remove'> 
</div> 

Answer 1

你只是点击 “＃将” 后开始删除按钮的功能。通过从内部功能除了它声明，并指定“委托（‘点击’，”你会确保每卸下摆臂元素将始终删除其母公司

$("#add").click(function() { 

    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />"); 

    fieldWrapper.append(removeButton); 
}); 


$('.remove').delegate('click', function() { 
    $(this).parent().remove(); 
});