jQuery: can I make functions available outside $(document).ready(function(){}?

Question

I have the following code:

     $(document).ready(function() {
       $("#popupClose").click(function(){  
            disablePopup();  
       });

       $(document).keypress(function(e){  
            if(e.keyCode==27) {  
                disablePopup();   
            }  
        });
});

And it works now (finally) to get the popup loaded before the document is finished (the popup is needed to steer the flow of the PHP in the file). However, since these functions are only created within document.ready, my controls of the popup are not yet available when my script is calling the popup.

Help appreciated!

Create the functions outside then. There is no reason they have to be inside the document ready callback. — Esailija, Aug 09 '12 at 12:09

score 2 · Accepted Answer · answered Aug 09 '12 at 12:08

2

You might want to try jQuery's document on function http://api.jquery.com/on/

$(document).on('click', "#popupClose", function(e) {
  disablePopup();
});

or

 $(document).on('keypress', "#popupClose", function(e) {
     if(e.keyCode == 27) { disablePopup(); }
    });

answered Aug 09 '12 at 12:08

Drazion

342
1
4
12

1

+1 for `on()` and not `live()` as so many still use. @Borniet: When binding to a dynamically loaded object you need to bind to the closest static object for best performance, thus if you have a div for example which the popup gets loaded into you are better of binding to it than the document i.e: `$("#myStaticElement").on('click', "#popupClose"` – Nope Aug 09 '12 at 12:10
Very true, I just wasn't sure what the structure of his document looked like – Drazion Aug 09 '12 at 12:15
Trying this one now. Replaced "document" by the ID of the DIV containing "popupclose". But nope, doesn't work. – Borniet Aug 09 '12 at 12:34

score 0 · Answer 2 · edited Aug 16 '12 at 14:28

0

Just try to declare your function outside of the $(document).ready(function(){...}), just inside the

<script> </script>

edited Aug 16 '12 at 14:28

Alfred

21,058
61
167
249

answered Aug 09 '12 at 12:07

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

Try to use .apply or .call javascript method. This should help your problem..

edited May 23 '17 at 12:27

Community

1
1

answered Aug 09 '12 at 12:10

Vins

8,849
4
33
53

score 0 · Answer 4 · answered Aug 09 '12 at 12:16

0

Use "#popupClose" as a selector as it always assumes you're talking about an ID in the current document, not the parent. Apart from that- What context is jQuery being loaded from? The IFrame or the parent window? This can make a big difference. Check whether if you have added #popupClose after loading the DOM, you will need to rebind the elements to the DOM jQuery is using. That may be your issue.

answered Aug 09 '12 at 12:16

Libin

86
8

Jquery and the JS file containing all the JS code are loaded like this, in the head section of the HTML. All HTML is created after PHP's session_start() function, and before anything else is done by PHP. Index – Borniet Aug 09 '12 at 12:30
@Borniet: As a side-note: Unless a script library specifically states otherwise it is good practice to add your scripts tags at the bottom of you html to ensure they get loaded after the html has been loaded. Good resource explaining this is here: http://developer.yahoo.com/performance/rules.html - Check section `Put Scripts at the Bottom` It also covers the exceptions off course when not to place scripts at the bottom, etc... – Nope Aug 09 '12 at 22:37

jQuery: can I make functions available outside $(document).ready(function(){}?

4 Answers4