添加和删​​除表单中的元素，第一次单击工作，后续点击不

Question

我正在尝试根据表单前一部分中的复选框向表单添加/删除元素。我的问题是，当用户第一次点击checkContact中的任何内容时，表单会正确附加。如果用户取消选中该框，则会正确删除该框。当用户重新单击该复选框时，不会添加该元素..

 $('.checkContact').click(function(){
    var addInfo = "<div class='middleRow'><input type='text' id='"+val+"_name[]' name='"+val+"'_name[]'></div>";
    if($(this).is(':checked'))
    {
            alert(addInfo);
            $('#'+divId).append(addInfo);
    }
    else
    {
            $('#'+divId).detach();
            // i have also tried .remove();
    }

小提琴： Fiddle

Answer 1

在else部分中，您要从dom树中删除元素$('#' + divId)，而不是删除其内容。您必须只清空容器元素，因为在if块中您将目标标记添加到容器元素。

$('.checkContact').click(function () {
    var val = $(this).val();
    var divId = val + '_div';
    var addInfo = "<div class='middleRow'><input type='text' id='" + val + "_name[]' name='" + val + "'_name[]'></div>";
    if (this.checked) {
        //alert(addInfo);
        $('#' + divId).html(addInfo);
    } else {
        //you are removing the container instead of removing its content
        $('#' + divId).empty();
    }
});

演示：Fiddle

Answer 2

取消选中此框后，您会使用name_div从DOM中删除.detach。因此，当您再次单击该框时，选择器无法找到任何内容，因此无法附加任何内容。

将.detach()更改为.empty()

DEMO

但也许更好的方法是隐藏和显示DIV，而不是添加和删除内容。

Answer 3

在您的代码中，您使用了detach（）或empty（），它将从DOM中删除元素，之后您将无法使用.html（）方法插入html。您必须使用.empty（）或.html（＆＃39;＆＃39;）而不是使用detach（）或remove（），这会将元素保留在DOM中，因此您可以一次又一次地附加元素。

$('.checkContact').click(function(){
    var addInfo = "<div class='middleRow'><input type='text' id='"+val+"_name[]' name='"+val+"'_name[]'></div>";
    if($(this).is(':checked'))
    {
            alert(addInfo);
            $('#'+divId).append(addInfo);
    }
    else
    {
            $('#'+divId).html('');
            //or   $('#'+divId).empty();

    }
});

见这里： http://jsfiddle.net/WYmVU/