Wordpress 在 noConflict 模式下运行 jQuery。这样做是为了允许依赖于特定 jQuery 版本的插件加载他们自己的 jQuery 版本,并且不会与 Wordpress 使用的一个冲突。
对你来说,这意味着你需要将你可能拥有的任何 jQuery 代码包装到一个函数中,并将 jQuery 对象传递给它:
(function($) {
// $ works here...
})(jQuery)
另一种方法是在所有 jQuery 代码中使用 jQuery 而不是 $。
此外,请确保在您期望的代码出现时运行您的代码。如...
(function($) {
// on dom loaded:
$(document).ready(){
// stuff
}
// on page loaded:
$(window).on('load', function(){
// stuff
})
})(jQuery)
在将 jQuery 代码包装到 noConflict 包装器后,如果仍然无法正常工作,请在 var 声明之前执行 console.log(this),以确保执行代码并找出 this 对象是什么在这种情况下。
也许你的.hmapsprem_cat_tab_container > div 选择器有问题,这就是你的代码的问题。
注意:一种更好的绑定方式,尤其是在 WordPress 中,任何插件都可以进行 ajax 调用并动态更改 DOM,是绑定到您可以信赖的容器上。
例如,假设您的页面容器的 id 为 main-container。您无需为.hmapsprem_cat_tab_container > div 集合中的每个元素添加一个绑定,而是在您可以信赖的容器上只创建一个绑定:
$('#main-container').on('click', '.hmapsprem_cat_tab_container > div', function(e) {
console.log(e, this);
})
您不仅可以将多个事件绑定替换为一个,而且还可以获得选择器在事件发生时进行评估的巨大优势,而不是在绑定完成时进行评估。这意味着即使在动态添加的元素上(如果在 .hmapsprem_cat_tab_container > div 元素内进行点击)绑定也将起作用,在绑定时不存在于 DOM 中。
显然,您可以将 #main-container 替换为 .hmapsprem_cat_tab_container > div 元素的任何其他有效父元素,包括 document。
经验法则是找到(并绑定)包含您希望定位的所有子代的最具体的父代。如果事件被放置在您绑定的容器之外的子项上触发,该函数将不会运行!
最后但同样重要的是:您应该使用 wp_enqueue_script 将 JavaScript 添加到 WordPress,对于这种情况,您应该将 jQuery 指定为脚本的 dep:
function enqueue_my_jquery_script() {
wp_enqueue_script(
'some_specific_script_name',
get_template_directory_uri('path/to/file.js',__FILE__),
['jquery']
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_jquery_script' );
上面的 sn-p 应该放在你的活动主题的functions.php 中,如果你在那个文件中定义了任何东西,你应该确保它没有放在另一个 php 函数中。 path/to/ 应该是相对于活动主题文件夹,file.js 应该包含您的 jQuery 脚本,包装在上面显示的包装器中。