当使用＜script type=“module“＞引入模块化组件时，jquery事件绑定失效

在 <script> 标签中，通过设置 type="module"，告诉浏览器该脚本是一个 ES6 模块，需要按照模块规范进行导入和导出。
此时因为该script模块的类型为module导致其他script出现失效的情况
比如编写以下代码之后，其他script中的点击事件会失效：

<script type="module">
  import {tophtml} from "../js/ad_top.js";
  import {foothtml} from "../js/ad_foot.js";
  new Vue({
    el:"#app",
    mounted(){
      this.$nextTick(()=>{
        $("#top").append(tophtml.template);
        $("#foot").append(foothtml.template);

      })
    },
  })
</script>
<script>
    $("#click1").click(function() {
      alert("点击事件")
    })
</script>

这时只需要将第二个script改为以下格式就可以运行

<script>
$(document).ready(function(){
    $("#click1").click(function() {
      alert("点击事件")
    })
})
</script>

$(document).ready(function(){ ... })(jQuery); 是一个使用 jQuery 库的 JavaScript 代码片段。它会在整个 HTML 文档完全加载完成后执行其中的代码。