将jQuery中的HTML复制到Bootstrap模式中

Question

单击图标后，下面的函数被调用，从而创建模式。在功能期间，我越过DOM，抓住HTML画布并将其显示在模态中。我遇到的问题是，它正在删除我最初抓取的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());
})

Answer 2

我认为您当前的代码段似乎过于复杂。

这是一个不同的解决方案，可能更容易遵循：

html：

...
<canvas class="one-of-my-charts"></canvas>
...

JS：

$('.one-of-my-charts').click(function(e) {
    $('#the-chart-modal').html(e.target);
    $('#the-chart-modal').modal('show');
});