javascript - 使用 jQuery/hide 隐藏动态附加的 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>');

然后像这样将所有组添加到您的新 contactContainer 之后:

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