我尝试使用jQuery插入一些模板,并在我使用时得到两个不同的结果:
a)
var $template = $("#productTemplate").html();
b)
var $template = $($("#productTemplate").html());
如果我使用a)情况我可以多次添加模板,如果我使用b)我只能添加模板一次。 那有什么区别?
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="but">
<a href="#" class="showForm"> Click </a>
</div>
<script id='productTemplate' type='text/template'>
<div class="product">
<h1>H1</h1>
</div>
</script>
</body>
</html>
main.js
$(document).ready(function(){
var $template = $($("#productTemplate").html());
$(".showForm").on("click",function() {
$("body").append($template);
});
});
答案 0 :(得分:3)
在(a)中$template
是一个字符串,.append($template)
总是会在添加之前根据字符串创建一个新的DOM片段。
在(b)中$template
是一个对象,因为$(HTML_String)
会返回jQuery
,而.append($template)
将始终使用相同的对象 - 重新附加它会移动它在DOM中。要重复使用$template
,您需要在追加之前明确.clone()
。
答案 1 :(得分:1)
&#34;我的猜测&#34;:当您将$ template对象加载到现场点击处理程序时,jQuery可能会识别您正在尝试附加相同的jQuery对象,然后jQuery不会附加。如果再次加载变量,它会起作用:
$(document).ready(function() {
$(".showForm").on("click", function() {
var $template = $($("#productTemplate").html()); //inside the click handler works
$("body").append($template);
});
});
Plunker:https://plnkr.co/edit/L19RGOKeQXYYkvOuBbX7?p=preview
编辑:
两个选项之间的区别在于b)你可以像已经有DOM的元素一样操作,也就是说,你可以做类似的事情:
$template.find("#my_hidden_id").val("12");
$template.find("#another_div").append("<p>Another html</p>");
然后附加新的自定义模板...