Web 组件未 运行 使用 $(document).ready 从组件内部

Question

我是 Web 组件的新手，正在尝试构建一个将 Kendo UI 组件与远程数据源相结合的可重用组件。 Kendo 组件依赖于使用 $(document).ready(function() 对其进行初始化。当我将该代码放入组件中时，它永远不会触发。

如果我只是将 html 标记放在组件中，然后将初始化它的脚本放在主代码中，它就可以正常工作。如果我将脚本放在组件中：我认为它永远不会触发。我已经在代码中输入了 console.log 以查看我是否看到任何东西，但是一无所获。我在控制台上没有收到任何错误，也看不到任何可以帮助我解决这个问题的有用信息。组件代码如下

customElements.define('location-multi-list2', class AppDrawer extends 
HTMLElement {
connectedCallback() {
this.innerHTML = '<div class="demo-section k-content">
        <h4>Dynamic Stores2</h4>
        <select id="hastores2"></select>
    </div>
    <script>
        $(document).ready(function() {
            $("#hastores2").kendoMultiSelect({
                dataTextField: "name",
                dataValueField: "id",
                dataSource: {
                    transport: {
                        read: {
                            dataType: "json",
                            url: "https://myDomain/path/storeList",
                        }
                    },
                    schema : {
                    data: "stores.location"
                    }
                }
            });
        });
    </script>';
}
});

Answer 1

如果您的脚本在包含 jQuery 库之前是 运行，则可能会发生这种情况。尝试在内部使用 $(document).ready() 函数，例如 window.onload = function(){$(document).ready(){}} 而不是仅仅调用它。

Answer 2

使用 .innerHTML 添加的任何 <script> 都不会是 运行。这是为了防止安全风险。有关详细信息，您可以阅读此页面上的 安全注意事项 部分：https://devdocs.io/dom/element/innerhtml

相反，您必须创建一个 <script> 元素并填写脚本：

class AppDrawer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="demo-section k-content">
      <h4>Dynamic Stores2</h4>
      <select id="hastores2"></select>
    </div>`;
    
    let script = document.createElement('script');
    script.textContent = `alert('here');
      $(document).ready(function() {
        $("#hastores2").kendoMultiSelect({
          dataTextField: "name",
          dataValueField: "id",
          dataSource: {
            transport: {
              read: {
                dataType: "json",
                url: "https://myDomain/path/storeList",
              }
            },
            schema : {
              data: "stores.location"
            }
          }
        });
      });
`;    
    this.appendChild(script);
  }
}

customElements.define('location-multi-list2', AppDrawer);

<location-multi-list2></location-multi-list2>