wordpress近期版本更新，無預警去除了jquery

by

今我在使用我網站的一個功能jsonnote時，發現不能用了。經查，原因是wordpress近期的版本更新，去掉了之前默認裝載的Jquery。

這個很難查到，不管搜尋英文還是中文網站，都沒有一個網站發篇文章來講這件事，以及解決辦法。

後來還是靠google AI才找到解決辦法，那就是在相應的地方加上這句：

wp_enqueue_script('jquery');

我曾經在十年前，很熟悉jquery，但是因為我知道這將是過時的技術，所以後來我就棄用了。更早之前我還熟悉flash動畫製作，但是我當時也知道flash將是一個過時的東西。

所以這個問題，有一個更好的解決辦法，那就是把jquery改寫為原生js。

		jQuery(document).ready(function($){
			var data = {
				action: 'json_post', 
				jsondata: jutxt,
				id: $juid
			}
			$.post("$admin_url", data, function(response) {
				$(".jud").text(response);
				$(".jud").removeClass("hide");
				setTimeout(function () {
					$(".jud").addClass("hide");
				}, 1200);
			});
		});

改成原生js：

    const data = new URLSearchParams({
        action: 'json_post',
        jsondata: jutxt, // 假設此變數已在外部定義
        id: $juid        // 假設此變數已在外部定義
    });

    // 發送 POST 請求
    fetch("$admin_url", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: data
    })
    .then(response => response.text()) // 取得回傳文字
    .then(responseText => {
        // 選取所有 class 為 .jud 的元素
        const judElements = document.querySelectorAll('.jud');

        judElements.forEach(el => {
            // 設置文字並移除 hide class
            el.textContent = responseText;
            el.classList.remove('hide');

            // 1.2 秒後重新加上 hide class
            setTimeout(() => {
                el.classList.add('hide');
            }, 1200);
        });
    })
    .catch(error => console.error('Error:', error));

值得注意的是，

		jQuery(document).ready(function($){

並不等同於

document.addEventListener('DOMContentLoaded', () => {

因為前者如果頁面加載完畢，仍然會執行，但是後者如果是頁面已經加載完成才走到，則不會執行。這也是一個不小的坑。

1 thought on “wordpress近期版本更新，無預警去除了jquery”

  1. 我剛才看了一下，wp版本是 6.9.4，jquery 還能用。

    wp_enqueue_script 是添加在哪個位置？我去看看是不是無意中添加了。

    不過 jquery 確實也過時了，我也打算修改成標準 js

Leave a Comment