I'm trying to insert some template with jQuery and get two different results when I'm using:
a)
var $template = $("#productTemplate").html();
b)
var $template = $($("#productTemplate").html());
If I use a) case I can add template many times, if I use b) I can add template only one time. So what is the difference?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css"/>
<script src=".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);
});
});
I'm trying to insert some template with jQuery and get two different results when I'm using:
a)
var $template = $("#productTemplate").html();
b)
var $template = $($("#productTemplate").html());
If I use a) case I can add template many times, if I use b) I can add template only one time. So what is the difference?
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./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);
});
});
2 Answers
Reset to default 4In (a) $template is a string, and .append($template) will always create a new DOM fragment, based on the string, before appending.
In (b) $template is an object, because $(HTML_String) returns jQuery, and .append($template) will always use the same object - re-appending it will move it around in the DOM. To reuse $template, you need to explicitly .clone() it before appending.
"My guess": Probably when you load your $template object outsite the click handler, jQuery identifies you are trying to append the same jQuery objet, and then jQuery doesn't append. If you load your variable again, it works:
$(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
EDIT:
The difference between the two options is that the b) you can manipulate like an already DOM element, i.e., you can do something like:
$template.find("#my_hidden_id").val("12");
$template.find("#another_div").append("<p>Another html</p>");
and then append your new custom template...