copy/clone script tag с jquery

Question

У меня есть тег <script> с содержимым в пределах элемента <div>. Теперь мне нужно скопировать/клонировать содержимое, сохранить его в переменной и добавить его позже.

Странно, когда я добавляю переменное содержимое, я просто получаю внешний <div>.

Любая идея, что я делаю неправильно? Мы используем jQuery 1.8.2.

Вот мой код:

HTML содержание:

<div id="payl"> 
    <div class="toolTipHandler"> 
     <script type="text/javascript"> 
      var xxx_title = "<h4>title</h4>"; 
      var xxx_text = "<p>bla bla</p>"; 
     </script> 
    </div> 
</div> 

script.js содержание:

var toolTipHandler = jQuery('#payl .toolTipHandler').clone(true); 
document.getElementById('payl').innerHTML = ''; 
jQuery('#payl').append(toolTipHandler); 

Результат:

<div class="toolTipHandler"></div> 

Answer 1

Имея тег сценария в пределах div не присваивает переменной в сценарии в div. Этот тег скрипта может находиться в любом месте страницы. Или переменные могут также быть объявлены в вашем файле script.js.

Может быть, лучше было бы использовать DATA- атрибуты в toolTipHandler DIV:

<div id="payl"> 
    <div class="toolTipHandler" data-title="<h4>title</h4>" data-text="<p>bla bla</p>"> 
    </div> 
</div> 

Но положить разметку значений не очень хорошее использование данных- атрибутов. Я бы сделал что-то вроде этого:

<div id="payl"> 
    <div class="toolTipHandler" data-title="title" data-text="bla bla"> 
     <h4></h4> 
     <p></p> 
    </div> 
</div> 

Затем вставьте значения из данных toolTipHandler. Ваш JavaScript может выглядеть примерно так:

var tth = $("#pay1 .toolTipHandler"); 
var title = tth.data("title"); 
var text = tth.data("text"); 
tth.find("h4").innerText = title; 
tth.find("p").innerText = text; 

Answer 2

Согласно

https://jquery.com/upgrade-guide/1.9/

До 1,9, любого HTML-акцепторной методы (например, $(), .append(), или .wrap()) выполняются скрипты в HTML и удалить их из документа, чтобы предотвратить их снова выполняется

Таким образом, проблема является .append() удаляет сценарий

Обходным решением может быть просто использование простого html для «клонирования и добавления» например. Скажем, у вас есть еще один DIV

<div id='payl2'>....</div> 

Просто скопируйте innerhtml

document.getElementById('payl2').innerHTML=document.getElementById('payl2').innerHTML+document.getElementById('payl').innerHTML; 

Результат будет выглядеть так:

<div id='payl2'>.... 

<div class="toolTipHandler"> 
    <script type="text/javascript"> 
     var xxx_title = "<h4>title</h4>"; 
     var xxx_text = "<p>bla bla</p>"; 
    </script> 
</div> 

</div>