JS 在 HTML 页面的自定义标签内找不到标签答案

【问题标题】：JS doesn't find tags inside a custom tags in the HTML pageJS 在 HTML 页面的自定义标签内找不到标签
【发布时间】：2021-02-23 23:07:06
【问题描述】：

我的项目有问题。在“index.html”页面中有一个自定义标签，其中有一个用作按钮的 DIV。我的项目有一个 js 文件，它是“script.js”。该文件具有在单击 DIV 时侦听的代码。我也在使用 jquery 库。文件“main.js”生成自定义标签。

index.html - 代码

<body>
   <custom></custom>
   <script content="text/html; src="//mymarialuisa.com/js/main.js" charset="utf-8"></script>
</body>

自定义标签里面有什么？ - 代码

<div class='toggle_mic' id='switch'>
  <div class='toggle-text-off'>OFF</div>
  <div class='toggle-text-on'>ON</div>
</div>

script.js - 代码

$(document).ready(function(){
 $('.toggle_mic').click(function(e){
   e.preventDefault();
   console.log("click");
 });
});

我正常开发了所有这些文件，没有自定义标签或在远程服务器上加载“main.js”文件，一切正常。然后，当我引入自定义标签并在远程服务器上加载“main.js”文件时，DIV 按钮停止工作。 “script.js”文件已正确加载；一切都正确加载，但是当我点击 DIV (.toggle_mic) 时它不起作用。

浏览器控制台没有报告任何错误！！！

【问题讨论】：

这里有两个框架。 jQuery 和 Vue。你需要了解它们是如何工作的。也许选择一个而不是另一个。理想情况下，您应该在 vue 中设置点击行为，而不是在 jquery 中。 document.ready 函数将在加载原始 DOM 时运行，before vue 发挥了神奇的作用。

标签： html jquery api vps custom-tags

【解决方案1】：

理想情况下，您应该是wiring up your click actions in vue，而不是 jquery。

请记住，当document.ready() 从jquery 运行时，vue 可能还没有完成更新 DOM。如果您坚持使用 jquery，请使用 jquery 的 on 而不是 click 来处理动态添加的对象。

如果您在可识别的内部有custom，则使用它作为您的父容器，否则使用body，但您应该避免这种情况。

$(document).ready(function(){
 $('body').on('click', '.toggle_mic', function(e){
   e.preventDefault();
   console.log("click");
 });
});

【讨论】：