使用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 文件中声明。

也许更好的方法是在 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;