How To Pass Namespace Variable Into Click Function Param Variable? Jquery

So I found an awesome solution to get around needing to use Global variables in jQuery here. Everywhere I say namespace, originally I was going to use a Global var. However I'm not

Solution 1:

First off, you should avoid putting things into the jQuery object. Use closures for that.

Second: You should use HTML data-... attributes and jQuery data() to attach custom properties to HTML elements. Avoid using non-standard properties.

Third: You can use separate named function definitions for event handlers, but it makes most sense when you actually re-use those functions for different elements across your code (you don't seem to do that). Using anonymous functions that you pass directly to .click(), for example, results in more understandable code.

// use this shorthand instead of $(document).ready(function () { ... });
$(function () {

  // variable reg will be available to all functions // defined within this outer function. This is called a closure.var reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
  };

  $(".roleButton").click(function (event) {
    // modify state
    reg.masterRole  = $(this).html();            /* Get role name: Actor */
    reg.role_ID     = $(this).data('role');      /* Get role-1 */
    reg.rowName     = $(this).data('row');       /* Get row-role-1 */
    reg.blueBtn     = $(this).data('blue');      /* Get blue-btn-1 */// note that this requires markup like this:// <button data-role="foo" data-row="bar" data-blue="baz">// ...
  });

  $(".doneButton").click(function (event) {
    // debug outputalert(JSON.stringify(reg, 2, 2));
  });

});

Use multiple $(function () { ... }); blocks to separate things that should be separate.

Don't forget to always use var for every variable you declare. Variables declared without var will be global - and you don't want global variables.