使用 jQuery 隐藏动态附加的 div / 隐藏不起作用

Question

我正在尝试使用 hide() 隐藏带有 jQ​​uery 的附加 div，但不起作用。

我也附加了触发动作的按钮。

这是按钮：

<button type="button" class="btn btn-danger btn-xs" name="'+response[i][0]+'" id="studentContactDeleteButton" style="width:110px">Eliminar registro</button>

这里是函数的完整代码（包括div和按钮）：

这样，我根据记录的数量将 div 附加到我的页面。

var formData = {type:"contact",id:id};
$.ajax({
    type: "POST",
    data : formData,
    url: "./content/studentsData.php", 
    dataType: 'json',
    success: function(response){
        for(var i = 0; i < response.length; i++) {
            $("#contactData").append('<div id="studentContactContainer'+response[i][0]+'" style="margin-bottom:-12px;border-top:1px solid #ddd;padding:16px 0px;">');
            $("#contactData").append('<div class="form-group"><label class="col-sm-4 control-label">Descripción:</label><div class="col-sm-7 text-primary" id="div-studentContactDesc'+response[i][0]+'"><input type="text" style="font-size:12px" class="form-control" value="'+decodeHtml(response[i][1])+'" id="studentContactDesc'+response[i][0]+'" placeholder="Descripción"></div><div class="col-sm-1">&nbsp;</div></div>');
            $("#contactData").append('<div class="form-group"><label class="col-sm-4 control-label">Teléfono:</label><div class="col-sm-7 text-primary" id="div-studentContactPhone'+response[i][0]+'"><input type="text" style="font-size:12px" class="form-control" value="'+decodeHtml(response[i][2])+'" id="studentContactPhone'+response[i][0]+'" placeholder="Teléfono"></div><div class="col-sm-1">&nbsp;</div></div>');
            $("#contactData").append('<div class="form-group"><div class="col-sm-1">&nbsp;</div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-success btn-xs" name="'+response[i][0]+'" id="button-test" style="width:110px">Guardar cambios</button></div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-danger btn-xs" name="'+response[i][0]+'" id="studentContactDeleteButton" style="width:110px">Eliminar registro</button></div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-primary btn-xs" id="" style="width:110px">Restablecer</button></div><div class="col-sm-2">&nbsp;</div></div>');
            $("#contactData").append('</div>');
        }
    }
}); 

有了这个，我试图隐藏 div 但不起作用

$(document).on('click','#studentContactDeleteButton',function(){
  var id = $(this).attr("name");
  $("#studentContactContainer"+id).hide();
});

点击工作正常，因为我得到了 id 的值（response[i][0] 有 id 的值）但$("#studentContactContainer"+id).hide(); 不起作用，只隐藏了 div 的边框顶部但不是全部。

希望有人有想法。

谢谢。

Answer 1

您以错误的方式使用 .append 函数。您必须传递一个完整的 div 作为参数，而不是在不同的部分。

$("#contactData").append('<div id="studentContactContainer'+response[i][0]+'"></div>');

然后将所有组添加到您的新联系人容器中，如下所示：

$("#studentContactContainer"+id).append(<div class="form-group"></div>)
                                .append(<div class="form-group"></div>);
                                .append(<div class="form-group"></div>);

Answer 2

循环中的第一个 append 语句是附加容器，但随后的 append 语句不会将指定的 div 附加到新容器。

我想你想要更多这样的东西

$('<div id="studentContactContainer'+response[i][0]+'"/>')
    .appendTo('#contactData')
    .append('<div>child div 1</div>')
    .append('<div>child div 2</div>');

为了获得更好的性能，在追加之前组合整个 html 字符串，像这样

var html = '<div id="studentContactContainer'+response[i][0]+'"><div>child 1</div><div>child 2</div></div>';
$('#contactData').append(html);

为了更易于维护，您可能需要考虑使用像 Handlebars 这样的模板引擎。