Why click in jquery only works once when loading the page

Question

To clarify the question, let me give the example like below.
I have three <div> elements like below:

  <div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

I added click listener for each <div> listed with Jquery like below:

<body>
  <script>
    $("div.toolbar-item").click(toolbar_click_listener());

    function toolbar_click_listener(){
        console.log("what happens");
    }   
  </script>
</body>

However, I can see "what happens" printed only once when I load the page, any further click event to those <div> elements doesn't work at all.

I searched over SO but failed to get answers. Do you know what's wrong here?

Should be `$("div.toolbar-item").click(toolbar_click_listener)`, without parentheses. Written like that, you _call_ the given function - and this happens exactly once. — raina77ow, Apr 24 '18 at 07:15
When you clicked more after 1st click, did you notice the numbers increasing in brackets in Console of browser? Actually the console of browser clubs the same messages or events and just shows the counter. — Himanshu Upadhyay, Apr 24 '18 at 07:18

score 3 · Answer 1 · edited Apr 24 '18 at 07:24

3

Use without parenthesis:

$("div.toolbar-item").click(toolbar_click_listener);

Also you can easily do this by

$("div.toolbar-item").click(function(){
  console.log("what happens");
});

edited Apr 24 '18 at 07:24

Rory McCrossan

331,213
40
305
339

answered Apr 24 '18 at 07:18

Nirali

1,776
2
12
23

It's a prompt answer, thx. – Eugene Apr 24 '18 at 07:31
I can upvote your answer cause it helps but I must accept Bailey's answer cause it's more detailed with why click handler is called once. – Eugene Apr 24 '18 at 07:33

score 3 · Accepted Answer · answered Apr 24 '18 at 07:21

It should be a function reference in handler not function call.

Your click handler should not be called on page load. It's happening because you are calling it here .click(toolbar_click_listener()); You will not want that.

When you want to assign a handler to an event. You give reference to that function not call it.

Change it to .click(toolbar_click_listener); and you'll see the expected behavior

$("div.toolbar-item").click(toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

Thanks for the detailed clarification. – Eugene Apr 24 '18 at 07:31 — Eugene, Apr 24 '18 at 07:31

score 1 · Answer 3 · answered Apr 24 '18 at 07:18

1

Just pass only reference of toolbar_click_listener function in click.

<body>
  <script>
    $("div.toolbar-item").click(toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }   
  </script>
</body>

answered Apr 24 '18 at 07:18

Nishant Dixit

5,388
5
17
29

Thanks, it makes sense. – Eugene Apr 24 '18 at 07:31

score 0 · Answer 4 · answered Apr 24 '18 at 07:24

Working Fiddle

HTML:

 <div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

JS:

$("div.toolbar-item").on("click",toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }

Why click in jquery only works once when loading the page

4 Answers4