Event function triggering when passing div ID

Question

I'm trying to write some Javascript that when a div is clicked, a function is called with the parameter of that divs ID, the function works when I just send the hardcoded div id like so:

$('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne'));


function onSectionClick(){
    var x = $('#areaOne).hasClass('toggled') ? 'false' : 'true';
    console.log(x)
}

However when I try it like this:

  $('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne'));


  function onSectionClick(secID){
    var x = $(secID).hasClass('toggled') ? 'false' : 'true';
    console.log(x)
  }

Then the function is called as soon as the page is loaded, rather then when the area is clicked. I want it to work this way as there are many areas that should trigger the same function.

I'm pretty new to Javascript so any help, or advice on how to do this in a better way would be greatly appreciated.

Possible duplicate of [jQuery's .click - pass parameters to user function](http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function) — Sebastian Simon, Sep 21 '16 at 14:00

score 3 · Accepted Answer · answered Sep 21 '16 at 13:59

3

The problem is that you call the function instead of giving a function reference. Try:

 $('#areaOne').on('show.bs.collapse', function(){onSectionClick('#areaOne')});

answered Sep 21 '16 at 13:59

Jan Thomä

13,296
6
55
83

score 1 · Answer 2 · answered Sep 21 '16 at 14:00

THe line

$('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne'));

calls onSectionClick, passing in '#areaOne', and passes its return avlue into on, exactly the way foo(bar()) calls bar and passes its return value into foo.

If you want to set it up to be called by the event, you pass a function reference rather than calling the function, e.g.:

$('#areaOne').on('show.bs.collapse', function() { onSectionClick('#areaOne'); });

In your case, though, you probably don't even want to do that. Instead:

$('#areaOne').on('show.bs.collapse', onSectionClick);
// Note no () -------------------------------------^

...and in onSectionClick, use this.id to get the ID of the clicked element ('areaOne' — add the # if you need it).

And if you have other "areas" that you also want to hook up, you can hook them up all at once:

$('selector-for-all-the-areas').on('show.bs.collapse', onSectionClick);

...and then you know which one relates to the event by which element this refers to in onSectionClick.

Thanks, this is really helpful I now have $('#areacontainer').on('show.bs.collapse', onSubSectionClick); however when I click on on of the areas i get the id of areacontainer rather than the individual area div — user2320239, Sep 21 '16 at 14:06
@user2320239: Yes, that's because `this` is always the element you (effectively) hooked the event on. You could throw *event delegation* at that: `$("#areacontainer").on("show.bs.collapse", "selector-that-matches-the-subsection", onSubSectionClick);` which would make `this` the element that matches the selector after the event. Simpler example: `$("div").on("click", "span", function() { ... });` in the handler, `this` will refer to the span inside the div that was clicked. — T.J. Crowder, Sep 21 '16 at 14:10

Event function triggering when passing div ID

2 Answers2