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

Question

I´m trying to hide a appended div with jQuery using hide() but is not working.

I'm append the button who trigger the action too.

This is the button:

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

Here is the complete code of the function (including the div and the button):

With this I append divs to my page depending of the number of my records.

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>');
        }
    }
}); 

And with this I´m trying to hide the div but is not working

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

The click works fine because im getting the value of the id ( response[i][0] have the value of the id) but $("#studentContactContainer"+id).hide(); is not working, only hide the border top of the div but not all.

Hope somebody have an idea.

Thanks.

Answer 1

You are using .append function in a wrong way. You have to pass a complete div as parameter and not in different parts.

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

and after add all groups to your new contactContainer like this:

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

Answer 2

Your first append statement in your loop is appending the container, but the subsequent append statements are not appending the specified divs to the new container.

I think you want something more like this

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

For better performance, compose the entire html string before appending it, like this

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

For easier maintainability, you may want to consider a template engine like Handlebars .