Селектор jQuery не работает в скрипте, но работает в консоли

Это действительно очень странная проблема, и я надеюсь, что это просто. Я не могу получить простой выбор и добавить для работы в свой html-документ, но он работает, когда я нахожусь в консоли Chrome.Селектор jQuery не работает в скрипте, но работает в консоли

<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
<script src="/js/script.js"></script> 
<script> 
$('[data-js="works"]').append("hello"); 
</script> 
</head> 
<body> 
<div data-js="works"></div> 
test 

</body> 
</html>

Когда я помещаю эту строку скрипта в консоль, приветствие появляется над тестом. Когда я просто открываю страницу, тест там один. Раньше я запускал скрипт с этой страницы, и когда я пытался выбрать элемент, он не работал. Затем я пошел на встроенный скрипт, чтобы увидеть, будет ли он работать там, нет. Я видел, работает ли он из встроенного скрипта без импортированного скрипта, также нет. Консоль не содержит информации об ошибке. Я могу распечатать из этого встроенного скрипта на консоль, если захочу, но этот код все еще работает неправильно.

Не работает с моим локальным httpserver и не работает как локально открытый файл.

источник

2016-04-26 Sally

Вы бежите ваши JS перед тем существуют фактические элементы на странице. Поместите свой скрипт перед тегом закрывающего тега или заверните его в готовый вызов документа. – j08691

Это происходит потому, что сценарий выполняется до загрузки страницы, так что целевой div еще не существует.

Решение состоит в том, чтобы дождаться, когда страница будет полностью загружена, прежде чем что-то делать. Функция $ может быть использована для этого. Дайте ему обратный вызов, и он будет выполнен после загрузки страницы.

Вы также можете использовать window.addEventListener("load", callback);, который не нуждается в jQuery.

<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
 
    <script> 
 
     $(function(){ 
 
     $('[data-js=works]').append("hello"); 
 
     }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div data-js="works"></div> 
 
    test 
 

 
    </body> 
 
</html>

Другим решением может быть, чтобы вставить скрипт в конце страницы. На мой взгляд, это не так аккуратно.

<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
    <div data-js="works"></div> 
 
    test 
 

 
    <script> 
 
     $('[data-js=works]').append("hello"); 
 
    </script> 
 
    </body> 
 
</html>

источник

2016-04-26 16:35:35

благословляйте youuuuuuuuu – Sally

Попробуйте следующее, надеюсь, что это решит вашу проблему

(function($) { // This will solve namespace problem (if any) 
    // Write your JQuery code here 
})(jQuery);

Либо вы поместите файл .js в конце тела или поместить код JS между $(document).ready(function(){ //code inside })

источник

2016-04-26 16:35:26

Селектор jQuery не работает в скрипте, но работает в консоли

ответ

Смежные вопросы