jquery - Accessing javascript in multiple files

admin管理员组

文章数量:1415120

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

in order to access jquery with a $, I am wrapping my Javascript file in

 (function($){
  .....
 })(jQuery);

This works fine, but I would like to add another javascript file which contains functions which I want to call from the original javascript file, but the functions are not available.

How can I call these functions? Do I need to prefix with a namespace or something?

Edits for clarification below. js file 1.

(function($){
    JS2_SayHi();
})(jQuery);

js file 2

(function($){
    function JS2_SayHi()
    {
        alert("Hi");        
    }
})(jQuery);

The JS2_SayHi function cannot be found. If I remove the (function($){..})(jQuery); wrapper from JS2, it does work, but I don't have access to jquery.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

in order to access jquery with a $, I am wrapping my Javascript file in

 (function($){
  .....
 })(jQuery);

This works fine, but I would like to add another javascript file which contains functions which I want to call from the original javascript file, but the functions are not available.

How can I call these functions? Do I need to prefix with a namespace or something?

Edits for clarification below. js file 1.

(function($){
    JS2_SayHi();
})(jQuery);

js file 2

(function($){
    function JS2_SayHi()
    {
        alert("Hi");        
    }
})(jQuery);

The JS2_SayHi function cannot be found. If I remove the (function($){..})(jQuery); wrapper from JS2, it does work, but I don't have access to jquery.

• jquery
• javascript

Share Improve this question edited Apr 11, 2019 at 8:58 StripyTiger asked Apr 10, 2019 at 20:56 StripyTigerStripyTiger 27711 silver badge66 bronze badges 3

• This won't work. JS2_SayHi is visible only inside closure (function($){ /* ..... */ })(jQuery);. Even in the second file, below })(jQuery) you will not call this function. Question about javascript (not related to Wordpress) are off-topic here. You should try on Stack Overflow. – nmr Commented Apr 11, 2019 at 9:05
• Look at this question – nmr Commented Apr 11, 2019 at 9:21
• Thank you - I thought is was WP related, and to do with the enqueuing, Will check the links you gave. – StripyTiger Commented Apr 11, 2019 at 9:45

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You have to create a dependency with

wp_register_script($handle, $src, $dependency, $version, true/false);

See WP codex: wp_register_script and then make sure that the second file is loaded correctly and right after the initial script.

The third parameter is an array for dependencies/other "handles".

So..in your case:

<?php
    // Functions.php or somewhere else
    wp_register_script('my_first_script',get_template_directory_uri().'/js/my-first-script.js', array('jQuery'), '1.0', true);
    wp_register_script('my_second_script',get_template_directory_uri().'/js/my-second-script.js', array('jQuery','my-first-script'), '1.0', true);

Where

...,array('jQuery','my-first-script'),...

is the dependency of your script which wordpress will handle for you (placement head/footer).

Last parameter bool true means, that is loaded in the footer. Also make sure, that your functions in jQuery have correct scoping.

That will register the scripts to wordpress, then enqueue them:

<?php
    ...
    wp_enqueue_script('my_first_script');
    wp_enquque_script('my-second-script');

?>

The answer above takes care of your script loading, but your scope problem remains.

Start by declaring your function as a generic variable, outside the braces. Then, inside the braces, assign your function to that variable. Declaring the function name outside your jQuery wrapper makes it globally available.

   var say_hi;

    (function($){
        say_hi = function(){
            echo “Hi!”;
        }
    })(jQuery)

本文标签： jqueryAccessing javascript in multiple files