Question

我试图使用hide（）使用jQuery隐藏附加的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>);

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等模板引擎。

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

2 个答案: