javascript - jQuery Find 在 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 传递到您选择的容器，最后您可以使用 id 选择器选择它

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>