将 jQuery 中的 HTML 复制到 BootStrap 模式中答案

【问题标题】：Duplicate HTML in jQuery into a BootStrap Modal将 jQuery 中的 HTML 复制到 BootStrap 模式中
【发布时间】：2018-05-27 19:50:15
【问题描述】：

点击图标后调用下面的函数，创建一个模态框。在函数执行期间，我遍历 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)
})

问候，詹姆斯。

【问题讨论】：

modal.find('.modal-body').html(chart.clone() ); 或许？
@Snowmonkey 应该是 $(chart).clone() 不是吗？因为button.parent().next()[0] 返回的是一个节点，而不是一个 jQuery 对象。
@Snowmonkey 抛出“chart.clone 不是函数”
@dferenc 有没有办法在 jQuery 中复制一个节点？
当然有：api.jquery.com/clone

标签： javascript jquery twitter-bootstrap modal-dialog traversal

【解决方案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());
})

【讨论】：

@JamesBarrett 我刚刚再次对其进行了测试，这似乎对我有用。您在控制台中看到了什么？
我刚刚删除了我的评论，因为我意识到 DOM 与 .html() 和 .clone() 存在一些不一致。所以我的原始代码 sn-p 带有一个父 div 元素（我实际上需要它，因此为什么画布显示在模态中！）：gyazo.com/b5b1c355f7c97b654914ada8fd27bbb7 您的解决方案在我的场景中不起作用，因为父 div 不是带上它：gyazo.com/… 我的问题是：为什么 .html() 带上父母而 .clone() 没有？
只是为了访问同一页面，您能否在问题中包含相关 html 的大纲？只是因为，你的

【解决方案2】：

在我看来，您当前的代码 sn-p 似乎过于复杂。

这里有一个不同的解决方案，可能更容易理解：

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');

});

【讨论】：