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

根据

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>

Answer 2

在 div 中包含脚本标记不会将脚本中的变量分配给 div。该脚本标记可以存在于页面中的任何位置。或者变量也可以在您的 script.js 文件中声明。

也许更好的方法是在 toolTipHandler div 中使用 data- 属性：

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