Блог

Главная - Вопросы по программированию - JS не находит теги внутри пользовательских тегов на странице HTML

JS не находит теги внутри пользовательских тегов на странице HTML

#html #jquery #api #vps #custom-tags

#HTML #jquery #API #vps #пользовательские теги

Вопрос:

У меня проблема в моем проекте. В «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), он не работает.

Консоль браузера не сообщает мне о каких-либо ошибках!!!

Комментарии:

1. Здесь у вас есть две платформы. jquery и vue. Вам нужно понять, как они работают. И, возможно, выберите один над другим. В идеале вы должны настраивать поведение кликов в vue, А НЕ в jquery. document.ready Функция будет запущена при загрузке исходного DOM, прежде чем vue сделает это волшебно.

Ответ №1:

В идеале вы должны подключать свои действия с кликами в 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");
 });
});