如何重置模态内容？

Question

过程是这样的
用户在搜索表单中搜索任何单词。 Ajax 调用word获取数据，然后用模态显示。

所以，我尝试使用 ajax 动态制作模态。
但是一旦调用，模态内容就不会改变。

1) 这是包含搜索表单的函数，它调用模态。

function answer() {
  //console.log('answer');
  var div = document.createElement('div');

  div.className = 'row';
  div.innerHTML = `<!-- file form start -->
                <!-- file form end -->
                <label class="col-md-2 col-form-label">문의내용</label>
                <!-- text form start -->
                {!! Form::open([ 'route' => ['qnamembercreate', $qnaMemberData->idx], 'method' => 'post', 'files' => true, 'accept-charset' => 'utf-8','class' => 'col-md-10 col-xs-9' ])!!}
                      <div class="col-sm-6 offset-md-6 p-0">
                          <div class="input-group">
                              <input type="text" id="f_search" name="f_search" class="form-control">
                              <span class="input-group-append">
                                  <button type="button" class="btn waves-effect waves-light btn-inverse" onclick="faq_search()">Search</button>
                              </span>
                          </div>
                      </div>
                      <input type="hidden" name="subject" value="{{ $qnaMemberData->subject }}">
                      <textarea id="answer_content" class="mb-0" rows="20" style="width:100%;" name="add_answer"></textarea>
                      <div class="form-group">
                        <input name="fileToUpload" type="file" class="filestyle" data-input="false" id="filestyle-1" tabindex="-1" style="display: none;">
                        <div class="bootstrap-filestyle input-group">
                          <div style="position: absolute; width: 100%; height: 35.375px; z-index: -1;"></div>
                          <span class="group-span-filestyle " tabindex="0">
                            <label for="filestyle-1" style="margin-bottom: 0;" class="btn btn-secondary btn-sm fload-right">
                              <input type="file" name="fileToUpload" class="filestyle-1" data-placeholder="" data-buttontext="첨부파일" data-buttonname="btn-secondary">
                            </label>
                          </span>
                        </div>
                      </div>
                      <button type="button" class="btn btn-danger btn-sm float-right ml-1 mt-1" onclick="history.back()">취소</button>
                      <button type="submit" class="btn btn-success btn-sm float-right mt-1">등록</button>
                  {!! Form::close() !!}
                  <!-- text form end -->`;

  document.getElementById('replyData').appendChild(div);
  document.getElementById('answer').remove();

  $('#answer_content').summernote({
      // placeholder: {!! json_encode($qnaMemberData->content) !!},
      tabsize: 2,
      height: 200,
      lang: 'ko-KR',
      fontNames: ['Gulim',  'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', ],
      fontNamesIgnoreCheck: ['Gulim'],
  });
}

2) 这是用户点击'search'按钮时的'faq_search'函数

function faq_search() {
    var word = $('#f_search')[0].value;
    //console.log(word);

    $.ajax({
        url : '/guidesearch',
        type : 'POST',
        data : {
            keyword: word
        },
        cache : false,
        success : function(data, jqXHR, textStatus) {
            console.log(data);
            faq_popup(data);
        }
    });
}

3) 这是'faq_popup'获取数据后调用的函数

function faq_popup(data) {
    var _data = data;
    console.log("here", _data);
    const appendedDiv = $(`
        <div class="modal fade show" tabindex="-1" id="faqModal" role="dialog" style="positon:center;">
          <div class="modal-dialog modal-dialog-centered">
            <!-- Modal content-->
              <div class="modal-content">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <tbody></tbody>
                    </table>
                 </div>
              </div>
            </div>
          </div>
        `);

    const tbody = appendedDiv.find('tbody')[0];
    _data.forEach(({ content, subject }, i) => {
        //console.log(i);
        const tr = tbody.appendChild(document.createElement('tr'));
        tr.innerHTML = `
                      <th scope="row">${i + 1}</th>
                      <td><a style="cursor:pointer">${subject}</a></td>
                     `;
        tr.querySelector('a').addEventListener('click', () => getContent(content));
    });

    $('#modal_place').append(appendedDiv);
    $('#faqModal').modal('show');
}

我尝试使用下面的代码重置模态。但问题是，一旦模态内容被清空，新的数据根本就不会被调用

$(document).ready(function(){

    $('body').on('hidden.bs.modal', '.modal', function () {
         console.log("modal closed");
         $(this).find('tbody td').html("");
    });
});

我真的不明白。因为我在 ajax 得到数据后调用 'faq_popup' ，所以应该显示新数据。但它并没有像我想的那样工作。
我在这里做错了什么？

** 我还试图清除整个模态内容。模态内容根本不显示。

$('body').on('hidden.bs.modal', '.modal', function () {
        console.log("modal closed");
        $(this).find('.modal-content').html("");
 });

Answer 1

我找到了解决方案。感谢@KaseyChang 给了我提示

原因是我没有正确销毁模态。模态已添加并添加到自身上。所以我就这样做了。

$('body').on('hidden.bs.modal', '.modal', function () {
        console.log("modal closed");
        $(this).remove();  <--- here!
});

Answer 2

在 AJAX 函数中，您可以使用 beforeSend 在调用之前 empty() 模式。这样它就会按顺序发生：

function faq_search() {
    var word = $('#f_search')[0].value;
    $.ajax({
        url : '/guidesearch',
        type : 'POST',
        data : {
            keyword: word
        },
        cache : false,
        beforeSend : function() {
            $('.modal-content').empty();
        },
        success : function(data, jqXHR, textStatus) {
            console.log(data);
            faq_popup(data);
        }
    });
}

如何重置模态内容？

How to reset modal contents?

javascript

jquery

bootstrap-modal