javascript - 将 jQuery 中的 HTML 复制到 BootStrap Modal 中

Question

单击图标后将调用以下函数，这将创建一个模式。在该函数期间，我遍历 DOM，抓取 HTML Canvas 并将其显示在模式中。我遇到的问题是它删除了我最初抓取的 HTML，我希望它被复制。有人能解释一下吗？

JS:

$('#chartModal').on('show.bs.modal', function (event) {
  console.log('yeppp');
  // Button that triggered the modal
  const button = $(event.relatedTarget)
  // Get corresponding chart's HTML
  const chart = button.parent().next()[0]
  var modal = $(this)
  // Update modal's content with the corresponding chart
  modal.find('.modal-body').html(chart)
})

问候，詹姆斯。

Answer 1

由于您使用的是 jQuery，因此可以使用 .clone()方法如下:

$('#chartModal').on('show.bs.modal', function (event) {
    // Button that triggered the modal
    var button = $(event.relatedTarget);
    // Get corresponding chart's HTML
    // "chart" is a plain node here
    var chart = button.parent().next()[0];
    var modal = $(this);
    // Update modal's content with the corresponding chart
    modal.find('.modal-body').html($(chart).clone());
})

// OR 

$('#chartModal').on('show.bs.modal', function (event) {
    // Button that triggered the modal
    var button = $(event.relatedTarget);
    // Get corresponding chart's HTML
    // "chart" is now a jQuery object
    var chart = button.parent().next();
    var modal = $(this);
    // Update modal's content with the corresponding chart
    modal.find('.modal-body').html(chart.clone());
})