在 WordPress 中使用 jQuery 來處理按鈕點擊事件

jQuery 是一個非常流行的 JavaScript 函數庫，廣泛用於簡化 JavaScript 程式編寫。然而，當在 WordPress 中使用 jQuery 時，可能會遇到與其他 JavaScript 函數庫之間的命名衝突。為了避免這種衝突，我們可以使用 jQuery.noConflict() 函數來確保 jQuery 和其他函數庫可以和平共處。

步驟 1：在 WordPress 中加載 jQuery

首先，確保您的 WordPress 插件或主題正確地加載了 jQuery。通常，WordPress 自帶 jQuery 庫，因此您只需要確保 jQuery 已經被 enqueue。

• 範例：加載 jQuery

  function my_enqueue_script() {
      wp_enqueue_script('jquery'); // 加載 WordPress 自帶的 jQuery
  }
  add_action('wp_enqueue_scripts', 'my_enqueue_script');
  

步驟 2：使用 jQuery.noConflict() 避免命名衝突

在 WordPress 中，由於 jQuery 的 $ 符號可能會與其他函數庫（例如 Prototype.js）發生衝突，因此我們使用 jQuery.noConflict() 來處理這個問題。

• 範例：在 PHP 文件中加入 jQuery 代碼 在您的自訂後台頁面（例如 my_device1.php）中，您可以加入以下代碼來處理按鈕的點擊事件：

  <script>
      $j = jQuery.noConflict();
      $j(document).ready(function() {
          $j('#add_btn').click(function() {
              alert("你點擊了建立按鈕");
          });
      });
  </script>
  

  代碼解釋：

  • $j = jQuery.noConflict();：這行代碼告訴 jQuery 不再使用 $ 符號作為快捷方式，而是將 jQuery 函數庫的引用存儲在 $j 變量中。這樣，您可以使用 $j 來訪問 jQuery 的所有功能，而不會與其他函數庫發生衝突。
  • $j(document).ready(function() {...});：這行代碼確保在 DOM 加載完成後才執行內部的代碼。
  • $j('#add_btn').click(function() {...});：這段代碼為按鈕（ID 為 add_btn）添加了一個點擊事件監聽器，當按鈕被點擊時，會彈出一個提示框顯示 “你點擊了建立按鈕”。

步驟 3：更新 my_device1.php 文件

將上述 jQuery 代碼添加到您的 my_device1.php 文件中，以便處理按鈕的點擊事件。

• my_device1.php 文件內容：

  <h3 class="pl-1 pt-2 font-weight-bold">裝置</h3>
  <hr>
  
  <div class="p-1">
      <button class="btn btn-primary m-1" type="button" id="add_btn">新增</button>
  </div>
  
  <script>
      $j = jQuery.noConflict();
      $j(document).ready(function() {
          $j('#add_btn').click(function() {
              alert("你點擊了建立按鈕");
          });
      });
  </script>
  

  這段代碼確保在 WordPress 後台頁面中正確地使用 jQuery，並且避免與其他可能存在的 JavaScript 函數庫發生衝突。