Click event in jQuery called twice or more

Question

I am new in Javascript and made a function structure like this:

var project = ... ; // it's dynamic

// first function
$('body').on('click', '.projectmonitoring', function () {
    SetMonitoring(project);
});

// second function
function SetMonitoring(project) {
    var tasks = ... ; // this variable produced inside Ajax

    // third function
    $('#save').click(function () {
        // do something using project and tasks variable
    });
}

Whenever I called the first function, SetMonitoring function was triggered of course. I called first function more than one (do a click twice or more). When I call the third function, what happens is the third function was executed much as the amount I called first function.

Maybe I am wrong in the structure. I hope has been explained well. Thanks in advance.

Do not attach event handlers in context of other event handlers. — Ram, Jan 08 '15 at 03:34
That's what happens when you bind event handlers inside event handlers, a new handler is added every time you click, multiplying etc. — adeneo, Jan 08 '15 at 03:34
What should I do? I must send the variable and global variable seems not work at all. Any idea for better structure? — andrefadila, Jan 08 '15 at 03:38
I have two links or more, each link will produce dynamic content on another page. — andrefadila, Jan 08 '15 at 03:58

score 0 · Accepted Answer · answered Jan 08 '15 at 03:44

0

Make a global var, set it in second function and then use it in third function.

var value_of_project;

// first function
$('body').on('click', '.projectmonitoring', function () {
    SetMonitoring(project);
});

// second function
function SetMonitoring(project) {
    //set value of project here
    value_of_project = "some value";
}

// third function
$('#save').click(function () {
    //do something using value_of_project 
});

answered Jan 08 '15 at 03:44

Chankey Pathak

21,187
12
85
133

I want do this, I will make sure every object loaded because I am using Ajax. – andrefadila Jan 08 '15 at 04:37
Then wait until Ajax is done, see: http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done – Chankey Pathak Jan 08 '15 at 19:02

score 0 · Answer 2 · answered Jan 08 '15 at 03:46

Well, you can use: $('#save').off('click').click(function () { ... But a better solution would be restracturing your code. You do not need to pass project par to setmonitoring function if it's a global... But in any case attaching an event handler inside ivent handler is an anti pattern...

score 0 · Answer 3 · answered Jan 08 '15 at 05:10

To make sure your function is being called only once-

use one-

var project = ... ; // it's dynamic

// first function
$('body').one('click', '.projectmonitoring', function () {
    SetMonitoring(project);
});

// second function
function SetMonitoring(project) {
    var tasks = ... ; // this variable produced inside Ajax

    // third function
    $('#save').click(function () {
        // do something using project and tasks variable
    });
}

Click event in jQuery called twice or more

3 Answers3