Passing Parameters into JavaScript object events using jQuery

Question

I know there are a LOT of similar question to this, but I've tried them all to no avail...so thanks for any help.

WHAT I AM TRYING TO DO: I want to pass one-to-many parameters into each checkboxes 'click' event upon registration (see below).

WHAT WORKS: I can register the event WITHOUT any parameters, and the click event raises...but I need to pass-in a reference to the containing JavaScript grid object (for other reasons).

WHAT FAILS I've tried various forms of "this.MutuallyExclusiveCheckBoxHandler = function(grid){}" to no avail.

ONE IDEA: I "think" currying may be the answer, but I don't quite know how to do it well-enough (yet).

This area instantiates the grid and registers the checkboxes

<script type="text/javascript">
<!--
    // CLASS
    function CommitImporterGrid() {
        // PROPERTIES
        this.Toaster = new Toaster();
        this.CheckBoxes = new Array();

        // METHODS
        this.RegisterMutuallyExclusiveCheckBox = function(clientId) {

            var checkBox = $j('input:checkbox#' + clientId);

            // HERE: "I need to pass a reference to the grid somehow"
            $j(checkBox).click(this.MutuallyExclusiveCheckBoxHandler);

            this.CheckBoxes.push(checkBox); // Append to array
        }
        this.MutuallyExclusiveCheckBoxHandler = function() {

            // The checkbox events break when I try to add a parameter.
            var myGrid = "I need to retreive the grid reference here somehow";

            if (!$j(this).is(':checked')) { // They clicked on the same checkbox
                this.checked = true;
                return;
            }

            // ...other code...
        }
    }

     // CLASS INSTANCE
     var myGrid = new CommitImporterGrid();

     // DOM EVENT: Document.Ready()
     $j(document).ready(function() {

         // DYNAMIC REGISTRATION
         myGrid.RegisterMutuallyExclusiveCheckBox('chkCommitImporter01');
         myGrid.RegisterMutuallyExclusiveCheckBox('chkCommitImporter02');
     });
-->
</script>

Felix Kling · Accepted Answer · 2010-07-06 15:23:02Z

1

Use .bind() and pass event data (assuming your grid is the current object):

// HERE: "I need to pass a reference to the grid somehow"
checkBox.bind('click', {grid: this}, this.MutuallyExclusiveCheckBoxHandler);

(you don't need to pass checkbox to jQuery, it is already a jQuery object)

and change your method to:

 this.MutuallyExclusiveCheckBoxHandler = function(event) {
      var mygrid = event.data.grid;
      //...
 }

(You can can access the event data via event.data)

answered Jul 6, 2010 at 15:23

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Felix Kling Over a year ago

@SLaks: Why? It should, otherwise, this.MutuallyExclusiveCheckBoxHandler won't work either.

SLaks Over a year ago

Inside the handler, this will be the DOM element.

Felix Kling Over a year ago

@SLaks: I think inside the handler, this should refer to the DOM element, otherwise, !$j(this).is(':checked') would not make sense.

Prisoner ZERO Over a year ago

Felix is correct: within the handler "this" did indeed referred to the (checkbox) element. So the "is checked" logic is working. As for the even.data solution...it works like a CHAMP. Thanks!

SLaks · Accepted Answer · 2010-07-06 15:26:28Z

0

You need to add an anonymous function that calls your handler with your parameters, like this:

this.RegisterMutuallyExclusiveCheckBox = function(clientId) {
    var self = this;

    var checkBox = $j('input:checkbox#' + clientId);

    $j(checkBox).click(function() {
        self.MutuallyExclusiveCheckBoxHandler(parameters);
    });

    this.CheckBoxes.push(checkBox); // Append to array
};

Inside the event handler, this refers to the element that triggered the event.
I therefore use a separate self variable instead.

edited Jul 6, 2010 at 15:26

answered Jul 6, 2010 at 15:20

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

Passing Parameters into JavaScript object events using jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related