javascript - jQuery .html() 和 .append() 呈现内容的方式与 HTML DOM innerHTML 属性不同

Question

我正在使用 MVC 部分 View 创建一些动态内容，该 View 作为字符串返回到 AJAX 调用。动态内容包括一些 Kendo UI 小部件(下拉列表、日期选择器等)(在部分 View 中配置和创建)，然后在页面上呈现。当使用 jQuery .html() 或 .append() 时，这一切都工作正常 - 一切加载正常，并且 Kendo 小部件无需执行任何操作即可初始化。

但是由于加载的动态内容量和所需的总时间，我正在考虑使用 HTML DOM innerHTML 属性作为性能更好的选项，但这不起作用。内容已加载，但 Kendo 控件未初始化，即使部分 View 包含用于初始化小部件的 JS。

// this doesn't work
var container = document.getElementById("content_" + id);
container.innerHTML = result.Data.PartialView;

// this returns undefined,a nd $("#dropDownList_1").data() returns an empty {} object
$("#dropDownList_1").data("kendoDropDownList")

// but this works
$("#content_" + id).html(result.Data.PartialView);

部分 View 的片段，其中包括初始化 Kendo 小部件的 JS:

<input id="dropDownList_1" name="dropDownList_1" type="text" /><script>
    jQuery(function(){jQuery("#dropDownList_1").kendoDropDownList({"dataSource":[{"Text":"Day","Value":"1"},{"Text":"Week","Value":"2"},{"Text":"Month","Value":"3"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Please select"});});
</script>

知道为什么使用 HTML DOM insideHTML 属性不执行 JS 来初始化小部件吗？

Answer 1

jQuery.html() 是innerHTML 的更复杂的包装器。它检查浏览器的兼容性并评估脚本。普通的innerHTML 没有。

使用 html()。

Why does html() execute JavaScript, but innerHTML doesn't?