使用jquery append追加一组元素后，Html元素无法正确显示
使用jquery append追加一组元素后，Html元素无法正确显示
提问于 2020-07-24 18:11:52
我在一个div中有一组元素，当一个按钮被单击时，我试图将它们附加到父div中。追加后，div的视图不能正确显示。我使用浏览器的inspect元素复制了附加的div，并将其直接放入代码中，然后重新加载页面，视图按预期显示。因此，问题似乎是在附加过程中出现的。如何解决此问题？
代码如下：
function addNewRow(){
let theList = $('#officeDraggableDiv');
let line = '<div class="nk-tb-item office-draggable-list" draggable="true"><div class="nk-tb-col nk-tb-col-check"><div class="custom-control custom-control-sm custom-checkbox notext"> <em class="icon ni ni-move doc-list"></em></div></div><div class="nk-tb-col"><div class="user-card"> <input type="text" class="form-control border-transparent form-focus-none" placeholder="Search by user or email"></div></div><div class="nk-tb-col tb-col-mb"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-md"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-lg"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div></div>';
theList.append(line);
}
回答 2
Stack Overflow用户
发布于 2020-07-24 18:23:50
请用事件代替函数
$(document).on('click',"#btn_add_office",function(){
let theList = $('#officeDraggableDiv');
let line = '<div class="nk-tb-item office-draggable-list" draggable="true"><div class="nk-tb-col nk-tb-col-check"><div class="custom-control custom-control-sm custom-checkbox notext"> <em class="icon ni ni-move doc-list"></em></div></div><div class="nk-tb-col"><div class="user-card"> <input type="text" class="form-control border-transparent form-focus-none" placeholder="Search by user or email"></div></div><div class="nk-tb-col tb-col-mb"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-md"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-lg"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div></div>';
theList.append(line);
});Stack Overflow用户
发布于 2020-07-24 18:45:51
也许你在代码的其他部分有一个错误。当我测试它的时候，你展示的函数是有效的。
下面是指向playcode.io中的代码的链接：playcode.io
你可以这样写你的代码：
$('#btn').on('click', function () {
addNewRow();
});
function addNewRow() {
let theList = $('#officeDraggableDiv');
let line =
'<div class="nk-tb-item office-draggable-list" draggable="true"><div class="nk-tb-col nk-tb-col-check"><div class="custom-control custom-control-sm custom-checkbox notext"> <em class="icon ni ni-move doc-list"></em></div></div><div class="nk-tb-col"><div class="user-card"> <input type="text" class="form-control border-transparent form-focus-none" placeholder="Search by user or email"></div></div><div class="nk-tb-col tb-col-mb"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-md"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div><div class="nk-tb-col tb-col-lg"> <select class="form-select form-select-sm" data-search="off" data-placeholder="Bulk Action"><option value="">Bulk Action</option> </select></div></div>';
theList.append(line);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63071502
复制相关文章
相似问题
腾讯云开发者
