使用 jQuery 复制/克隆脚本标记
copy / clone script tag with jquery
我有一个<script>
标签,其中包含<div>
元素中的内容。现在我需要复制/克隆内容,将其存储在变量中,稍后再附加。
奇怪的是,当我附加变量内容时,我只是得到外部<div>
.
知道我做错了什么吗?我们正在使用 jQuery 1.8.2。
这是我的代码:
目录内容:
<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>
脚本.js内容:
var toolTipHandler = jQuery('#payl .toolTipHandler').clone(true);
document.getElementById('payl').innerHTML = '';
jQuery('#payl').append(toolTipHandler);
结果:
<div class="toolTipHandler"></div>
根据
https://jquery.com/upgrade-guide/1.9/
在 1.9 之前,任何接受 HTML 的方法(例如 $()、.append() 或 .wrap())都会执行 HTML 中的任何脚本,并将它们从文档中删除以防止它们再次执行
所以问题是 .append() 正在删除脚本
解决方法可能是仅使用纯 html 来"克隆和附加"例如。假设您有另一个div
<div id='payl2'>....</div>
只需复制内部html
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>
在div 中使用脚本标记不会将脚本中的变量分配给div。该脚本标记可以位于页面中的任何位置。或者,变量也可以在脚本.js文件中声明。
也许更好的方法是在 toolTipHandlerdiv 中使用 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>
然后插入工具提示处理程序数据中的值。你的 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;
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 导入jQuery脚本获胜'我不处理html文件
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- 如何创建php函数或任何脚本/jquery Javascript,使我能够获取与复选框关联的值并添加它们
- 我们是否有任何通用脚本/ jquery插件可以在通过ajax选项卡加载的内容上应用javascript
- 当超出范围时,延迟执行脚本Jquery(或SetTimeOut)BUT
- 内联 HTML 数据角色<>脚本 jquery:Kendo Widget Initialization
- 如何在显示网页时调用脚本 jquery
- 什么是实现可拖动分隔符的轻量级脚本/jQuery 扩展
- 如何通过传递参数来调用 C#(aspx.cs) 函数,使用 Java 脚本/Jquery
- 将警报DIV添加到验证脚本(jquery / javascript)
- 如何通过PHP脚本jQuery XML文件并正确解析它
- 动态更改标记属性ASP.NET后,Java脚本(JQuery)将无法工作
- 未捕获的引用错误使用外部脚本&jQuery移动
- 上传脚本- jQuery参数内的Javascript变量
- 需要帮助的脚本- jquery
- 请帮助与ajax脚本+ jquery
- 使用Java脚本/jQuery解析json中的嵌套数组对象
- Java脚本/Jquery验证问题
- 在ajax成功后在页面上应用java脚本/ Jquery