I have a problem in my project. In the "index.html" page there's a custom tag, and inside that there's a DIV that work as a button. My project has a js file, and it's "script.js". This file has the code that listens when the DIV is clicked. I'm using the jquery library too. The file "main.js" generates the custom tag.
index.html - CODE
<body>
<custom></custom>
<script content="text/html; src="//mymarialuisa.com/js/main.js" charset="utf-8"></script>
</body>
What's inside custom tag ? - CODE
<div class='toggle_mic' id='switch'>
<div class='toggle-text-off'>OFF</div>
<div class='toggle-text-on'>ON</div>
</div>
script.js - CODE
$(document).ready(function(){
$('.toggle_mic').click(function(e){
e.preventDefault();
console.log("click");
});
});
I developed all of these files normally, without the custom tag or loading the "main.js" file on a remote server, and everything worked right. Then, when I introduced the custom tag and I loaded the "main.js" file on a remote server, the DIV button stopped working. The "script.js" file is correctly loaded; everything is correctly loaded, but when I click on the DIV (.toggle_mic) it doesn't work.
The browser console doesn't report me any errors!!!
Ideally you should be wiring up your click actions in vue, not jquery.
Keep in mind that when
document.ready()runs fromjquery, vue may not have completed updating the DOM. If you insist on using jquery use jquery'soninstead ofclickto handle dynamically added objects.If you have
custominside an identifiable use that as your parent container, otherwise usebody, but you should avoid that.