I am passed 3 html elements as parameters to JS function. JS function is in separate file. I have problem to bind 'click' event with _confBtn object (which is parameter). My plete JS file:

 window.HAS = window.HAS || {};
HAS.MyApp = HAS.MyApp || {};

(function (_this, $, undefined) {
var _sessionTimeOut = false;
var _startCountDown = false;
var _counterTime;
var _countDownTime;
var _dialogWrap;
var _confBtn;
var _counter;

_this.init = function (showDialogTime, logofCountDownTime, dialogWrap, counter, confirmationButton) {

    _counterTime = 5;
    _countDownTime = 0;
    _dialogWrap = $('#' + dialogWrap);
    _confBtn = $('#' + confirmationButton);
    _counter = $('#' + counter);
    alert(_confBtn.text());
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
}

_confBtn.on('click', function () {
    window.clearInterval(_startCountDown);
    _dialogWrap.css('visibility', 'hidden');
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
});

function createSessionTimeOut() {
    _sessionTimeOut = window.setTimeout(function () {

        _dialogWrap.removeAttr("style");
        _counter.text(_counterTime);
        $(document).unbind("mousemove keypress mousedown mouseup");

        startCountDown();
    }, 2000);
}

function startCountDown() {
    _startCountDown = window.setInterval(function () {
        if (_counterTime >= 0) {
            _counter.text(_counterTime--);
        }
        _countDownTime++;
        if (_countDownTime >= 4) {
            logOutUser();
            return;
        }

    }, 1000);
}

function resetTimeOut() {
    window.clearTimeout(_sessionTimeOut);
    _sessionTimeOut = false;
    createSessionTimeOut();
}

function logOutUser() {
    $.ajax({
        url: '/MyApp/Account/LogOut',
        type: 'GET',
        success: function () {
            document.location.href = '/MyApp/Account/Login';
        }
    })
}

}(window.HAS.MyApp.SessionTimeOut = window.HAS.MyApp.SessionTimeOut || {}, jQuery));

I call in separate page like in following:

SessionTimeOut.init('5', '5', 'dialog-wrap', 'confirm-button', 'counter');

I have issue with _confBtn when I try to call click event. Browser show that is undefined.

Please help.

I am passed 3 html elements as parameters to JS function. JS function is in separate file. I have problem to bind 'click' event with _confBtn object (which is parameter). My plete JS file:

 window.HAS = window.HAS || {};
HAS.MyApp = HAS.MyApp || {};

(function (_this, $, undefined) {
var _sessionTimeOut = false;
var _startCountDown = false;
var _counterTime;
var _countDownTime;
var _dialogWrap;
var _confBtn;
var _counter;

_this.init = function (showDialogTime, logofCountDownTime, dialogWrap, counter, confirmationButton) {

    _counterTime = 5;
    _countDownTime = 0;
    _dialogWrap = $('#' + dialogWrap);
    _confBtn = $('#' + confirmationButton);
    _counter = $('#' + counter);
    alert(_confBtn.text());
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
}

_confBtn.on('click', function () {
    window.clearInterval(_startCountDown);
    _dialogWrap.css('visibility', 'hidden');
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
});

function createSessionTimeOut() {
    _sessionTimeOut = window.setTimeout(function () {

        _dialogWrap.removeAttr("style");
        _counter.text(_counterTime);
        $(document).unbind("mousemove keypress mousedown mouseup");

        startCountDown();
    }, 2000);
}

function startCountDown() {
    _startCountDown = window.setInterval(function () {
        if (_counterTime >= 0) {
            _counter.text(_counterTime--);
        }
        _countDownTime++;
        if (_countDownTime >= 4) {
            logOutUser();
            return;
        }

    }, 1000);
}

function resetTimeOut() {
    window.clearTimeout(_sessionTimeOut);
    _sessionTimeOut = false;
    createSessionTimeOut();
}

function logOutUser() {
    $.ajax({
        url: '/MyApp/Account/LogOut',
        type: 'GET',
        success: function () {
            document.location.href = '/MyApp/Account/Login';
        }
    })
}

}(window.HAS.MyApp.SessionTimeOut = window.HAS.MyApp.SessionTimeOut || {}, jQuery));

I call in separate page like in following:

SessionTimeOut.init('5', '5', 'dialog-wrap', 'confirm-button', 'counter');

I have issue with _confBtn when I try to call click event. Browser show that is undefined.

Please help.

• javascript
• jquery
• html

• Is it possible? Yes. You can pass HTML elements, jQuery objects, both, or neither to a JavaScript method. You can't, however, include jQuery method calls in your function definition--remember $() is a function call. – nbrooks Commented Nov 7, 2014 at 7:56
• Might be worth mentioning that you're not passing HTML to the function, but jQuery selections, representing elements, in turn representing some HTML markup. – Peter Herdenborg Commented Nov 7, 2014 at 7:59
• Eureka moment happened! I use $('#container').delegate('a', 'click', function() { alert("That tickles!") }); Instead of click and it works. According to alfajango./blog/… Tomorrow I will more detail review how delegate works. – kat1330 Commented Nov 7, 2014 at 10:54
• Generally I bind click to my button like this: $(document).delegate('#confirm-button', 'click', function () { }); – kat1330 Commented Nov 7, 2014 at 18:56

5 Answers 5

It would probably better to do something more dynamic like this:

function SomeFunction (element1,element2) {
    var e1 = $("#"+element1),
        e2 = $("#"+element2);
    // Do something with variables e1 and e2
}

and you would call like this:

//html:
<div id="one"><div>
<div id="two"><div>

//javasctript:
SomeFunction('one','two');

No, you are mixing a function declaration with a function call somehow. You can't provide function arguments when defining a function. This however will work fine:

function someFunction($element1, $element2) {
    //Do something with the elements
}

someFunction($("#element1"), $("#element2"));

Note that $element1 and $element2 are just variable names, and the leading $ doesn't have anything to do with jQuery. It is just a mon convention to identify variables referencing jQuery selections.

You can of course do it, just by using the normal jQuery way of including multiple selectors. Your code is slightly incorrect because you are actually only defining the function without calling it, and you are not supposed to pass arguments/variables into the function when defining it.

Unless you have the intention to distinguish between two groups of elements, I would refrain from declaring elements individually as you have used in your question, because sometimes you will never know the length of the selected items.

function someFunction($ele) {
    // jQuery objects will be accessible as $ele
}

// Call the function
someFunction($('#selector1, #selector2'));

However, if the former is the case, you can always do so:

function someFunction($ele1, $ele2) {
    // jQuery objects will be accessible as $ele1 and $ele2 respectively
    // Example: $ele1.hide();
    //          $ele2.show();
}

// Call the function
someFunction($('#selector1'), $('#selector2'));

For example, you can refer to this proof-of-concept JSfiddle: http://jsfiddle/teddyrised/ozrfLwwt/

function someFunction($ele) {
    // jQuery objects will be accessible as $ele
    $ele.css({
        'background-color': '#c8d9ff'
    });
}

// Call the function
someFunction($('#selector1, #selector2'));

If you want to pass some elements to function you can use jQuery constructor to standardize arguments

function SomeFunction (element1,element2) {
    element1 = $(element1);
    element2 = $(element2);
    // and you have 2 jQuery objects...
}

// and now you can pass selector as well as jQuery object.
SomeFunction($('div.a'),'#b');

You can pass paramters as much as you want this way. I use jQuery in this code and created a simple function.

var item=$("#item-id");
var item1=$("#item1-id");

makeReadOnly(item,item1);    

function makeReadOnly(){
    for(var i=0;i<arguments.length;i++){
        $(arguments[i]).attr("readonly", true);
    }
}