使用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

有内script标签div不分配变量es在脚本内的div。该脚本标签可以位于页面的任何位置。或者也可以在script.js文件中声明变量。

也许一个更好的办法是在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 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>