How can I pass a function reference with multiple arguments to the callback of my jQuery(document).on('click' event?

StackOverflow https://stackoverflow.com/questions/23612132

  •  20-07-2023
  •  | 
  •  

Question

I have the following code definition

$(document).on('click', firstRow, processEvent(firstRow, rowArray));

Which uses the parameters below. As it currently stands I am passing the function processEvent rather than the function definition stored in the variable, and so the function is being invoked immediately.

I wish to set up click handlers dynamically, and for my feature to work I need to be able to pass two parameters to the callback on the click event. The first is a reference to the DOM element(s) the click is attached to, and the second is an array of DOM elements indentifiers (stored as strings) .

How can I pass a function reference with multiple arguments to the callback of my jQuery(document).on('click' event?

var firstRow = '.first-row';
    var secondRow = '.second-row';
    var thirdRow = '.third-row';

    var rowArray = [firstRow, secondRow, thirdRow];


    var hideRow = function(input){
        var Input = input;
        $(Input).show();
    };
    var showRow = function(input){
        var Input = input;
        $(Input).hide();
    }
    // alert(rowArray);


    //Hide second and third rows
    $('.second-row, .third-row').hide();

    var processEvent = function(e, fooArray){ // currently set to one
        var E = e;  // Cache ID of calling object 
        var a = fooArray;
        // alert(E);
        // alert(a);
        var arrayLength = a.length;
        for (var i = 0; i < arrayLength; i++) {
            foo = a[i];
            // alert(row); //
            alert(foo);
            if (foo = e){
                showRow(e);
            }
            else {
                hideRow(foo);
            }
        }
    } // function testProcessEvent(){ processEvent(); }

    $(document).on('click', firstRow, processEvent(firstRow, rowArray));

This is my first attempt $(document).on('click', firstRow , someFunction(firstRow ));

Was it helpful?

Solution

Use

$(document).on('click', firstRow, function () {
    //place the code here
    processEvent(firstRow, rowArray);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top