jQuery Найти не найти элемент в шаблоне HTML

Question

У меня есть шаблон telerik KendoUI, который я загружаю в объект jQuery.Это работает.

<script type="text/x-kendo-template" id="customKeywordsEditorPopup">
    Custom Keywords
    <input style="width:100%" id="inpKeywords"/>
</script>

Теперь вот код JavaScript, который не дает ожидаемого результата:

         var popupHtml = $("#customKeywordsEditorPopup"); //This works

         alert($(popupHtml).html()); //This outputs the HTML as expected
         alert($(popupHtml).find('#inpKeywords').length); //This returns 0 instead of 1

К сожалению, $ (popupHtml) .find ('# inpKeywords') НЕ возвращает фактический элемент.Он должен ссылаться на ВХОД.

Есть идеи, почему это не работает?

Answer 1

$(popupHtml).find('#inpKeywords').length

Возвращает 0, поскольку в вашем теге <script> нет элементов.Текст внутри тегов <script> не отображается как html.

Чтобы ваш шаблон стал html, вы должны передать его через kendo, передать его как html в выбранный вами контейнер, и, наконец, вы можетевыберите его с помощью селектора идентификаторов

var template = kendo.template($("#customKeywordsEditorPopup").html());
$("#SomeContainer").html(template({}));
var input = $("#inpKeywords");

Демо

var templateText = $("#customKeywordsEditorPopup").text();

var template = kendo.template(templateText);
$("#SomeContainer").html(template({}));
var input = $("#inpKeywords");
input.val('Some value');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<link ref="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.all.min.css">

<script type="text/x-kendo-template" id="customKeywordsEditorPopup">
  Custom Keywords
  <input style="width:100%" id="inpKeywords" />
</script>

<div id="SomeContainer"></div>