网站模板下载

wordpress 中JQuery使用问题 报错:Uncaught TypeError: $ is not a function

作者 JQuery使用问题 2020-09-13 254

wordpress中 JQuery使用问题 报错:Uncaught TypeError: $ is not a function,
在企图通过css隐藏掉wordpress个人资料中的first-name 和 last-name时候,报错:Uncaught TypeError: $ is not a function,
在这里找到了相关的参考代码:
https://noexceptions.io/disabling-first-and-last-name-changes-in-the-wordpress-profile/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Function to disable the first name and last name fields
function disable_first_and_last_name_fields() {
	?>
	<script type="text/javascript">
        $(function() {
            // Disable the first and last names in the admin profile so that user's cannot edit these
				$('#first_name').prop( 'disabled', true );
				$('#last_name').prop( 'disabled', true );
        });
   	</script>
	<?php
}
 
// Action hook to inject the generated JavaScript into admin pages
add_action( 'admin_head', 'disable_first_and_last_name_fields' );

比较简单,就是通过wordpress提供的action钩子,在内容管理页面注入jQuery脚本,把相关dom节点移除。

但是,直接在function.php中贴入的时候,发现并不起作用。

通过alert和console调试,发现代码块并未执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Function to disable the first name and last name fields
function disable_first_and_last_name_fields() {
	?>
	<script type="text/javascript">
        $(function() {
			console.log("smt to be console");
			alert("alert smt");
            // Disable the first and last names in the admin profile so that user's cannot edit these
			$('#first_name').prop( 'display', false );
			$('#last_name').prop( 'disabled', true );
        });
   	</script>
	<?php
}
 
// Action hook to inject the generated JavaScript into admin pages
add_action( 'admin_head', 'disable_first_and_last_name_fields' );

最后在stackoverflow上找到了该问题的原因:

https://stackoverflow.com/a/45346975/12261182

就是把代码段中的$换作jQuery即可。

1
var $ = jQuery;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Function to disable the first name and last name fields
function disable_first_and_last_name_fields() {
	?>
	<script type="text/javascript">
		let $ = jQuery;
        $(function() {
			console.log("smt to be console");
			alert("alert smt");
            // Disable the first and last names in the admin profile so that user's cannot edit these
			$('#first_name').prop( 'display', false );
			$('#last_name').prop( 'disabled', true );
        });
   	</script>
	<?php
}
 
// Action hook to inject the generated JavaScript into admin pages
add_action( 'admin_head', 'disable_first_and_last_name_fields' );

注意,这里,let $ = jQuery不会对其它的页面造成影响。但是在”Add New User”页面的时候,运行会出现”$ has been declared“的报错,为了保起见,应该不使用$符号,你可以指定任意其它的符号变量,例如let $$ = jQuery. 或者为了后期更加便于维护,请直接使用jQuery较为稳妥。

It works !

这个问题在这里有更加详细的讨论:https://stackoverflow.com/questions/12258282/typeerror-is-not-a-function-wordpress

https://stackoverflow.com/a/12258427/12261182

分享给朋友 wordpress 中JQuery使用问题 报错:Uncaught TypeError: $ is not a function-好哇网

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!
好哇网 » wordpress 中JQuery使用问题 报错:Uncaught TypeError: $ is not a function

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号