Jquery append 功能仅适用于初始 ajax 请求，需要刷新页面以重新填充另一个 div答案

【问题标题】：Jquery append function only works on initial ajax request, requires page refresh to repopulate another divJquery append 功能仅适用于初始 ajax 请求，需要刷新页面以重新填充另一个 div
【发布时间】：2021-06-21 11:36:50
【问题描述】：

我正在发出 AJAX 请求以获取 JSON 数组，成功后会执行另一个 AJAX 请求，并且内容通过 jquery append 函数填充到引导模式的 div 中。对于第一个选择，一切正常，但是，一旦我关闭模式并尝试另一个条目，附加功能将不再填充 div。我试图清空 div 的内容并尝试了克隆功能，但无论如何，在页面刷新之前不会重新填充内容。我尝试登录到控制台，数据是正确的，并且每次单击都会重新填充。对不起，如果我的代码很糟糕，还在学习。下面是我正在使用的代码。任何帮助将不胜感激。

     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);
                                });
                               },   
                         });    
                    },
              });

  });

【问题讨论】：

标签： javascript php jquery ajax codeigniter

【解决方案1】：

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

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

【讨论】：