JQuery: Access appended HTML after AJAX

Question

I wanted to append a new entry after an ajax request. This works perfectly. Unfortunately the design is messed up, and as I inspected my document the html has been loaded perfectly, but e.g. trying to access the data-status attribute of the recently inserted always fails.

What did I do wrong?

$('.newRoomSubmit').click(function(){

                    if($.trim($('.roomName').val()) != "" && $.trim($('.roomDescription').val()) != "" && $.trim($('.building_id').val()) != ""   ){
                        $('#myRoomModal').modal('hide');

                    $.ajax({
                        type : 'POST',
                        url : '@routes.Admin.saveNewRoom()',
                        data : {
                            roomName: $('.roomName').val(), roomDescription: $('.roomDescription').val(), building_id : $('.building_id').val()
                        },
                        success : function(data) {

                         var newReference =  reference.parent().parent().parent().children().eq(1).append(   
                   '<div class="row">'+
      '<div class="col-sm-3 col-xs-6"><b>'+$('.roomName').val()+'</b></div>'+
      '<div class="col-sm-2 col-xs-7 col-sm-offset-7 text-right"> '+
'<button class="btn  btn-sm btn-default editableRoom" data-status="'+parseInt(data,10)+';'+$(".roomName").val()+';'+$(".roomDescription").val()+';" data-toggle="modal" data-target="#roomEditModal"><span class="glyphicon glyphicon-pencil"></span></button>'+
'<button class="btn btn-sm btn-danger removableRoom" data-status="'+parseInt(data,10)+';'+$(".roomName").val()+'" data-toggle="modal" data-target="#confirmRoomDelete"><span class="glyphicon glyphicon-remove"></span></button>'+
      '</div>'+ 
      '</div>');

                        },
                         error : function(err) {

                            alert(err.responseText); 
                            }
                        });
                    } else {
                        alert("Das Formular wurde nicht vollständig ausgefüllt!");
                    }

                });

The design after my insertion looks like this, I added a red box and 2 red lines by way of illustration, just so that you can distinguish the difference:

The real problem is, that after my insertion I click on the button with the pencil-glyphicon in the inserted row. As my modal shows up, it doesnt get the data-status of the html as input. But as I inspected that row in my browser, I could clearly see that the data-status has been added correctly to the new row.

This is how it should look (example of one row above).

Why does my jquery has problems with it?

The click method of the pencil-icon on the newly inserted row should put the values into my input tags and it looks like this:

$('.editableRoom').click(function(w) {
                   w.preventDefault();
                   var statusCode = $(this).data('status'); 

                   var felder = statusCode.split(';', 3);

                   $('#roomEdit_id').val(felder[0]);
                   $('#roomEditName').val(felder[1]);
                   $('#roomEditDescription').html(felder[2]);


                 $('#editRoomSubmit').click(function(){
                        /** on click wird das modal versteckt und
                        der User bekommt wieder die neugeladene lab Seite zu sehen*/
                        $('#roomEditModal').modal('hide');
                    });
                });

I researched here jQuery can't access append element and here Refresh DOM with jquery after AJAX call but it doesn't seem to relate to my problem.

Thanks in advance :), I would really appreciate your help :)!

Answer 1

Someone said something about event delegation. I suspect that you're doing something along this line:

$('.class').click(function(e){//something here});

Try this:

$(document).on('click','.className',function(e){//do something here});

Explanation (in the rough) - the page you were looking at, btw, had a very good explanation:

What you were doing was directly binding the to the elements present on the page at the time the function was executing - meaning that when the function that bound elements was executing, it was looking at all the elements that you had on the page and binding (associating an event with an action) an event to them. At that point your future element was not in the page hence it had nothing bound to it - it still triggered the event, but it did not have the associacion in place. The other approach was to bind to the root document (though you could bind to any parent element, present in the page, at the time the binding function is executing) and tell it: look, when an event comes along that was triggered by this type of element, do this.