时间戳

首页 > 解决方案 > JS 在 HTML 页面的自定义标签内找不到标签

html - JS 在 HTML 页面的自定义标签内找不到标签

问题描述

我的项目有问题。在“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) 时它不起作用。

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

标签： htmljqueryapivpscustom-tags

解决方案

理想情况下，您应该在 vue而不是 jquery中连接您的点击操作。

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

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

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

推荐阅读