jQuery self invoking function no access to variable?

Question

I have a javascript file that self invokes and I am trying to get the moduleID in my onClick event.

What am I doing wrong here? Another thing to note is that I have several of these files being included as "Widgets" all with their own moduleID. I am afraid that if I were to move this variable declaration above, making it a global, if its going to interfere with the other widgets that are also declaring a moduleID variable?

$(function() {

    // Define our vars
    var moduleID = 4,
        output = '';

... Some more stuff ...

});

//Listen for button click
$('[name=adminSearchGo]').click(function() {
    alert(moduleID); // No Access
});

Function at Question is call to `.ready()`, not IIFE. `moduleID` would be available within `.ready()` handler — guest271314, Jul 03 '16 at 02:50
Simply you can't access, because of different scopes. But, if you can keep the `moduleID` with the element itself (as `data-module-id="4"`) , then you can access as `$(this).data('module-id')` or `$(this).attr('data-module-id')`. — Safeer Hussain, Jul 03 '16 at 02:59
Or bind the click event ( `$('[name=adminSearchGo]').click` ) inside your previous function, where your `moduleID` is defined — Safeer Hussain, Jul 03 '16 at 03:04

Joseph · Accepted Answer · 2016-07-03T03:06:48.750

1

Anything defined inside a function cannot be accessed outside the function.

What you can do is put your binding inside the $(function(){...}) so that it can see the variables..

$(function() {

    // Define our vars
    var moduleID = 4,
        output = '';

  //Listen for button click
  $('[name=adminSearchGo]').click(function() {
    alert(moduleID); // No Access
  });

});

Also, depending on where this script runs, putting your .click binding outside $(function(){...}) will potentially not work as the element might not exist yet. The entire purpose of $(function(){...}) is to call the function when the DOM is ready.

edited Jul 03 '16 at 03:06

answered Jul 03 '16 at 02:53

Joseph

117,725
30
181
234

I am a little confused by this line "What you can do is put your handler inside the $() callback so that it will be in the same scope." – SBB Jul 03 '16 at 02:55

score 0 · Answer 2 · edited May 23 '17 at 12:14

It's not about jQuery, it is about the javascript variable scope.
You can refer to this:
What is the scope of variables in JavaScript?

As for the solution, you say that these files are included as widgets, so it's better to put all the behaviors of one module together inside this module. Like this:

$(function() {

    // Define our vars
    var moduleID = 4,
        output = '';

    ... Some more stuff ...


    //Listen for button click
    $('[name=adminSearchGo]').click(function() {
        alert(moduleID);
    });
});

score 0 · Answer 3 · answered Jul 03 '16 at 03:00

Function at Question is call to .ready(), not IIFE. moduleID would be available within .ready() handler, though you can also utilize .data() to attach an moduleIDs, output's to document as arrays within document .data() object; use separate .ready(): $(function(){}) handlers to set .data(). Note, presently this is document within .ready() handler : $(function(){})

$(function() {

  // Define our vars
  var moduleID = 4,
    output = '';
  $(this).data({
      "moduleID": [moduleID],
      output: [output]
    })
    // ... Some more stuff ...

});

$(function() {

  // Define our vars
  var moduleID = 5,
    output = "abc";
  $(this).data().moduleID.push(moduleID);
  $(this).data().output.push(output); 
    // ... Some more stuff ...

});

$(function() {
    // Define our vars
  var moduleID = 6,
    output = "def";
  $(this).data().moduleID.push(moduleID);
  $(this).data().output.push(output); 
  //Listen for button click
  $("[name=adminSearchGo]").click(function() {
    alert($(document).data().moduleID[0]); // No Access
  });
  console.log($(document).data())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="adminSearchGo" value="click" />

score 0 · Answer 4 · answered Jul 03 '16 at 03:11

$(function(){ var a,b,c; }) all the vars( like a,b,c) defined inside of function are not available outside .you can consider it as an enclosures. 1.define the var as a global one; 2.exports the var like "window.xxx = var(like a,b,c)" 3.exports a function that can access the var

jQuery self invoking function no access to variable?

4 Answers4