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!");
                    }

                });

插入后的设计看起来像这样，我添加了一个红色的方框和2条红线作为插图，这样你就可以区分它们了： You can clearly see the messed up design

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

它应该是这样的（上面一行的例子）。 enter image description here

为什么我的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});

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

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

JQuery：在AJAX之后访问附加的HTML

1 个答案: