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一起使用，并且不能像本地打开的文件一样工作。

你正在运行的JS之前存在于页面上的实际内容。将脚本放在结束标签之前或将其包装在文档准备好的调用中。 – j08691

答

之间的JS代码。这是因为剧本在加载页面之前执行，因此目标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>

祝福youuuuuuuuuu – Sally

答

尝试以下，希望它会解决你的问题

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

要么你把js文件在身体的结束或将$(document).ready(function(){ //code inside })

jQuery选择器不能在脚本中工作，但在控制台中工作

相关推荐