.on event firing on load instead of click

Question

Ok guys im new to jquery and have been making considerable progress but this one has me stumped. i have a event handler I'm binding to a dynamically loaded div to handle clicks hovers etc however when i try to bind a custom function it fires it on load instead of when clicked.

function AddUser(){
       alert('Hi');
       if ($section !== 'addUser'){
           $section = 'addUser';        
       $('.userPanel').empty();
       $('.userPanel').load('pages/addUser.html');
       }
       else{return;}
    }

    $(document).on("click", "a.addUser", AddUser());

However if i define an event inside of the .on binding it works fine

        $(document).on("click", "a.addUser",function(){
        alert('Hi');
    });

I probably missed something elementary but this has had me frusterated all morning so any help would be appreciated.

Note: I realize that binding to document is generic and i should be binding to the one of my static parent divs it was just a change i made while testing.

Thanks In Advance.

Where is you code added ? Do you expect to function when you click on page ? — Pit Digger, Sep 14 '12 at 18:56

score 8 · Accepted Answer · answered Sep 14 '12 at 18:57

8

Change:

$(document).on("click", "a.addUser", AddUser());

to

$(document).on("click", "a.addUser", AddUser);

By adding the parenthesis to AddUser you're effectively calling it at that point in your code.

answered Sep 14 '12 at 18:57

j08691

204,283
31
260
272

1

Thanks a million i figured it was going to be something elemental that helps out a bunch now i can move forward. – SelfTaughtCodeMonkey Sep 14 '12 at 19:07

score 3 · Answer 2 · answered Sep 14 '12 at 18:58

3

$(document).on("click", "a.addUser", AddUser);

or

$(document).on("click", "a.addUser", function(){
   AddUser();
 });

answered Sep 14 '12 at 18:58

xkeshav

53,360
44
177
245

That's what I was thinking +1 – user1477388 Sep 14 '12 at 18:58
redundant anonymous function.. older versions of IE will start punishing you if you continue adding anon function like these.. – Baz1nga Sep 14 '12 at 19:01

score 2 · Answer 3 · answered Sep 14 '12 at 18:57

2

Just remove the parentheses from AddUser()

$(document).on("click", "a.addUser", AddUser);

answered Sep 14 '12 at 18:57

Andreas

21,535
7
47
56

score 1 · Answer 4 · answered Sep 14 '12 at 18:58

Change

$(document).on("click", "a.addUser", AddUser());

to

$(document).on("click", "a.addUser", AddUser);

Because AddUser() is self-invoked and executed after page load.

OR

$(document).on("click", "a.addUser", function(){
  AddUser();
});

because, function() { AddUser(); } is not self-invoked block and will execute everything within it when the event occurs.

score 0 · Answer 5 · answered Sep 14 '12 at 18:58

0

use function signature otherwise you will be invoking the function.. change it to

$(document).on("click", "a.addUser", AddUser);

Demo

answered Sep 14 '12 at 18:58

Baz1nga

15,485
3
35
61

.on event firing on load instead of click

5 Answers5