JQuery：在 AJAX 之后访问附加的 HTML [重复]

Question

我想在 ajax 请求之后附加一个新条目。 这完美地工作。不幸的是，设计搞砸了，当我检查我的文档时，html 已经完美加载，但是例如尝试访问最近插入的数据状态属性总是失败。

我做错了什么？

$('.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!");
                    }

                });

我插入后的设计是这样的，我添加了一个红框和两条红线作为插图，只是为了让你区分不同：

真正的问题是，在我插入之后，我点击了插入行中带有铅笔字形的按钮。当我的模态出现时，它没有将 html 的数据状态作为输入。但是当我在浏览器中检查该行时，我可以清楚地看到数据状态已正确添加到新行中。

这就是它的外观（上面一行的示例）。

为什么我的 jquery 有问题？

新插入行上铅笔图标的点击方法应该将值放入我的输入标签中，如下所示：

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

我在这里jQuery can't access append element 和Refresh DOM with jquery after AJAX call 进行了研究，但这似乎与我的问题无关。

在此先感谢 :), 非常感谢您的帮助:)！

Answer 1

有人谈到了事件委托。我怀疑你正在做这件事：

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

试试这个：

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

解释（粗略）-顺便说一句，您正在查看的页面有一个很好的解释：

您所做的是直接将 绑定到函数执行时页面上存在的元素 - 这意味着当绑定元素的函数正在执行时，它正在查看页面上的所有元素并将事件绑定（将事件与动作相关联）到它们。那时你的未来元素不在页面中，因此它没有任何绑定 - 它仍然触发了事件，但它没有适当的关联。另一种方法是绑定到根文档（尽管您可以绑定到页面中存在的任何父元素，在绑定函数执行时）并告诉它：看，当一个由 this 触发的事件发生时元素的类型，执行此操作。