以编程方式更新Bootstrap模态体div的子div中的内容

Question

这是我的Bootstrap模态窗口 - 非常简陋。

<div id="modal_test_form" class="modal">
  <div class="modal-dialog"> 
    <div class="modal-content">
      <div class="modal-header">
        <h2 >Hello
      </div>
      <div id="tbody" class="modal-body">
        <div id="tbody_part1">
           Change me! Change me!
        </div>
      </div>
      <div class="modal-footer">
         <h3>Goodbye</h3>
      </div>
    </div>
</div>

显示模态窗口后，我想更新div id="tbody_part1"的内容。我如何使用jquery做到这一点？

$('#tbody_part1').html("new content!");

不起作用。

谢谢！

Mmiz

Answer 1

您需要在加载模态后触发更新。如果你正在进行ajax加载，我无法从你发布的代码中看出来，但这里是：

(function ($) {
    $(function () {
        var $modal = $('#modal_test_form');
        $modal.on('shown.bs.modal', function (e) {
            $modal.find('#tbody_part1').html("new content!");
        });
    });
})(jQuery);