jQuery 适用于 jsfiddle 但不适用于 WordPress [重复]答案

【问题标题】：jQuery works in jsfiddle but not in WordPress [duplicate]jQuery 适用于 jsfiddle 但不适用于 WordPress [重复]
【发布时间】：2015-09-15 18:57:10
【问题描述】：

我一直在用 jQuery 编写屏幕灰显脚本。它在我的 jsFiddle 上的以下链接中有效，但我的 WordPress 插件中的以下代码不起作用。

https://jsfiddle.net/jblevins1991/8ts25q2v/1/

包含 javascript 的 PHP 代码：

function myScripts() {
    wp_enqueue_script('myScript', plugins_url('myPlugin/JS/myScript.js'), array('jquery'), true);
}

add_action('wp_enqueue_scripts', 'myScripts');

HTML 代码：

<div id="box"></div>
<img id="something" src="http://www.w3schools.com/images/w3schools.png" />

myScript.js 文件中的 jquery：

$(document).ready(function() {
    $('#something').click(function() {
        $('#box').show();
        $('#box').fadeTo(500, 0.5);
    });
});

【问题讨论】：

你的javascript是否被渲染了？首先检查您的 html 源代码。
调试你的代码。 console.log($('#something')); 从文档里面准备好了。它找到元素了吗？在点击内添加一行，是否调用？它找到盒子了吗？你展示和做fadeTo也很奇怪。控制台有错误吗？
所有其他正常的javascript代码都在工作。它实际上是与 jquery 相关的所有内容。我试图检查 jquery 是否正在页面上加载并且它在标题中。我还使用 jslint 来确保它是有效的 jquery 代码。
我非常怀疑这是我的代码。我认为这更多的是在 wordpress 方面。我这么说是因为它适用于普通的 html 页面 jsfiddle，但不适用于 wordpress。
在 myScript 之前还是之后包含 jQuery？

标签： javascript jquery html css wordpress

【解决方案1】：

尝试使用以下 JavaScript 代码：

jQuery(document).ready(function($) {
    $('#something').click(function(){
        $('#box').show();
        $('#box').fadeTo(500, 0.5);
    });
});

它基本上将您的代码包装在无冲突包装器中，因为使用 $() 可能会返回 undefined 否则。

【讨论】：

你先生真是太棒了！感谢您的解决方案。
为了更清楚地说明这个答案：WordPress 在无冲突模式下加载 jQuery。您无法通过$ 访问jQuery，而无需准备好无冲突安全的文档。备用的无冲突安全 jQuery 文档的简写形式就是 jQuery(function($) { // .. $ is safe in here ... });