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

});