Jquery append函数只适用于初始的ajax请求，需要刷新页面才能重新填充另一个div

Question

我正在进行一个AJAX请求以获取JSON数组，成功后执行另一个AJX请求，并通过jquery append函数将内容填充到引导模式的div中。对于第一个选择，一切都正常，但是，一旦我关闭模态并尝试另一个条目，append函数就不再填充div。我尝试清空div的内容，也尝试了clone函数，但无论内容如何，直到页面刷新后才会重新填充。我试着登录到控制台，每次点击数据都是正确的并重新填充。抱歉，如果我的代码很糟糕，还在学习。下面是我正在使用的代码。如有任何帮助，我们将不胜感激。

function makeModal({first_name, last_name, id}) {
return `
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${first_name} ${last_name}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>${last_name}</p>
<p>${id}</p>
<p id="job_history"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
//onclick event
$(document).on('click', '.applicant_detail', function(e) {
var id = $(this).data('id');
//$('#job_history').empty();
$('#myModal').modal('dispose');
$.ajax({
type: "POST",
url: "/admin/get_applicant",
dataType: 'json',
data: {id:id},
success: function(data) {
var count = Object.keys(data).length;
$.each(data, function(index, element) {
var m1 = $(makeModal({last_name:element.last_name, first_name:element.first_name, id:element.id})); 
document.body.insertAdjacentHTML('beforeend', m1);
m1.modal('show');
});
$.ajax({
type: "POST",
url: "/admin/get_job_history",
dataType: 'json',
data: {application_id:id},
success: function(data) {
var count = Object.keys(data).length;
$.each(data, function(index, element) {
$('#job_history').append("Job Title: " + element.job_title + '<br>').clone();
console.log('Job Title: ' + element.job_title);
});
},   
});    
},
});
});

Answer 1

我想明白了。我需要销毁通过makeModal函数创建的模态。因此，我删除了每个点击事件的div。不确定这是否是最好的方法，但它有效。

$('#myModal').remove();  //added this below the click event