问题描述
我的项目有问题。 在“ index.html”页面中，有一个自定义标签，在其中有一个DIV，它可用作按钮。 我的项目有一个js文件，它是“ script.js”。该文件包含单击DIV时侦听的代码。我也在使用jquery库。 文件“ main.js”会生成自定义标签。
index.html-代码
import matplotlib.pyplot as plt
df = d1.copy()
fig,ax = plt.subplots()
size = 0.3
vals = np.array([[60.,32.],[37.,40.],[29.,10.]])
cmap = plt.get_cmap("tab20c")
outer_colors = cmap(np.arange(3)*4)
inner_colors = cmap(np.array([1,2,5,6,9,10]))
ax.pie(df.groupby('Class',sort=False)['count'].sum(),radius=1,colors=outer_colors,labels=df['Class'].drop_duplicates(),autopct='%1.1f%%',wedgeprops=dict(width=size,edgecolor='w'))
ax.pie(df['count'],radius=1-size,colors=inner_colors,labels=df['product'],edgecolor='w'))
ax.set(aspect="equal",title='distribution 1 and 2')
plt.show()
<body>
<custom></custom>
<script content="text/html; src="//mymarialuisa.com/js/main.js" charset="utf-8"></script>
</body>
script.js-代码
<div class='toggle_mic' id='switch'>
<div class='toggle-text-off'>OFF</div>
<div class='toggle-text-on'>ON</div>
</div>
我正常开发了所有这些文件，而没有自定义标签或在远程服务器上加载“ main.js”文件，并且一切正常。然后，当我引入自定义标签并将“ main.js”文件加载到远程服务器上时，DIV按钮停止工作。 “ script.js”文件已正确加载；一切都已正确加载，但是当我单击DIV（.toggle_mic）时，它不起作用。
浏览器控制台没有向我报告任何错误！！！
解决方法
理想情况下，您应该是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");
});
});