WordPress中无法调用外部加载JS文件的函数问题求助

Hey, I see exactly what's going on here—this is a classic JavaScript scope issue!

Your validateForm function is trapped inside the immediately-invoked function expression (IIFE) in client.js, which means it only exists in that local scope, not the global scope where your HTML's onclick event is trying to access it. Let's break this down and fix it.

Why the error happens #

Take a look at your client.js code:

(function($) {
  function validateForm(){ 
    console.log('Form validated'); 
  };
})( jQuery );

The IIFE creates a private scope for your code (great for avoiding global namespace pollution!), but that also means validateForm isn't accessible outside of that function. When you click the div, the browser looks for validateForm in the global window object—and can't find it, hence the ReferenceError.

Fix Option 1: Expose the function to the global scope #

If you want to keep using the inline onclick event, you can explicitly attach the function to the global window object:

(function($) {
  // Attach the function to window to make it globally accessible
  window.validateForm = function(){ 
    console.log('Form validated'); 
  };
})( jQuery );

This makes validateForm available everywhere, including your HTML's inline event handler.

Fix Option 2: Use jQuery event binding (Recommended!) #

Since you're already using jQuery, it's better practice to separate your HTML and JavaScript code instead of using inline onclick events. Here's how:

1. Add a class or ID to your div in search_form.php to target it:

<div class="form-validate-btn"> CLICK ME </div>

2. Update your client.js to bind the click event with jQuery:

(function($) {
  // Wait for the DOM to be fully loaded before binding events
  $(document).ready(function() {
    $('.form-validate-btn').on('click', function() {
      console.log('Form validated');
      // Put your form validation logic here
    });
  });
})( jQuery );

This approach keeps your code clean, avoids polluting the global scope, and follows modern JavaScript best practices.

Quick note on your script loading #

Your plugin_functions.php setup is working correctly (you see loaded_client in the console), so the issue isn't with how you're enqueuing the script—it's purely about scope!

内容的提问来源于stack exchange，提问作者Marius Cristian Stan