jQuery добавить шаблон?

Я пытаюсь вставить шаблон с помощью jQuery и получить два разных результата при использовании:

а)

var $template = $("#productTemplate").html();

b)

var $template = $($("#productTemplate").html());

Если я использую а) случай, я могу добавить шаблон много раз, если я использую б) я могу добавить шаблон только один раз. Так в чем же разница?

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

});
4 голоса | спросил Gatto 8 Maypm16 2016, 18:41:05

2 ответа


0

В (a) $template есть строка, а .append($template) всегда будет создавать новый фрагмент DOM на основе строки перед добавлением.

В (b) $template это объект, потому что $(HTML_String) возвращает jQuery и .append($template) всегда будет использовать один и тот же объект - при повторном добавлении он будет перемещаться в DOM. Чтобы повторно использовать $template, вам необходимо явно .clone() это до добавления.

ответил Roamer-1888 8 Maypm16 2016, 18:53:51
0

«Мое предположение»: возможно, когда вы загружаете свой объект $ template вне обработчика кликов, jQuery определяет, что вы пытаетесь добавить тот же объект jQuery, а затем jQuery не добавляется. Если вы снова загрузите переменную, она будет работать:

$(document).ready(function() {
  $(".showForm").on("click", function() {
    var $template = $($("#productTemplate").html()); //inside the click handler works
    $("body").append($template);
  });
});

Плункер: https://plnkr.co/edit/L19RGOKeQXYYkvOuBbX7?p=preview

EDIT:

Разница между этими двумя опциями заключается в том, что б) вы можете манипулировать как уже DOM-элемент, то есть вы можете сделать что-то вроде:

$template.find("#my_hidden_id").val("12");
$template.find("#another_div").append("<p>Another html</p>");

, а затем добавьте новый шаблон ...

ответил Diego Polido Santana 8 Maypm16 2016, 18:52:51

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132