0

There are similar questions on this topic but their answers didnt work for my problem.

Im trying to use jQuery's on("click") to fire a function that simply changes the class of the id which was clicked. But the function is called when the page is loaded and then if you click on what should fire the function it wont.

Here is the html:

<nav>
    <ul>
        <li id="all" class="tab-current"><a><span>All Departments</span></a></li>
    </ul>
</nav>

And here the js:

var $all = $("#all");
$all.on("click", function(){
    tabClicked("all");
});

I've also tried this:

$all.on("click", tabClicked("all"));

And this is the function:

function tabClicked(input){
    //do some stuff here
}

Any ideas? Thanks in advanced! :)

Pablo Duque
  • 383
  • 2
  • 20

3 Answers3

5

You have an error in your click handler logic; you just need to pass an anonymous function to the handler:

$all.on("click", function(){
    tabClicked("all");
});

Your original $(function() {}); is equivalent to $(document).ready() hence it was immediately executed, regardless of whether the element had been clicked.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • 1
    I doubt it will throw any syntax error..Edit: It will once `click` is invoked.. – Rayon Apr 04 '16 at 10:56
  • That is not fired when page is load, but wont fire either when clicked... – Pablo Duque Apr 04 '16 at 10:56
  • @PabloDuque this should work fine. Check the console in your page for other errors. – Rory McCrossan Apr 04 '16 at 10:57
  • @RayonDabre true, it's a syntax error in the sense that it's not the right syntax for the required behaviour, not that it is an actual error. Updated the answer to be clearer. – Rory McCrossan Apr 04 '16 at 10:58
  • @RoryMcCrossan Im afraid it does not work.... and there are no erroes in the console. I've followed the execution and the function is never called – Pablo Duque Apr 04 '16 at 11:00
  • 1
    As you can see this works fine: https://jsfiddle.net/6au8zf9g/. The only way I can see this would not work is if you have multiple elements all with the same `id` of `all`, which is invalid HTML and you should change them to be a class instead. – Rory McCrossan Apr 04 '16 at 11:03
  • I know its a simple action and it should work thats why I came here since I've reviewed every little detail I know and still wont work. No, IDs I've used are all unique – Pablo Duque Apr 04 '16 at 11:56
  • In that case there's not much anyone can do with the information you've given us, as it should be working fine. If you could setup your own http://jsfiddle.net with a demonstration of the actual behaviour you're seeing – Rory McCrossan Apr 04 '16 at 14:14
3
var $all = $("#all");

$all.on("click", function(){
    tabClicked("all");
});

Try editing it like this. $(function() {}); is like $(document).ready(), so put function(){} instead of $(function() {});.

EDIT:

For some reason, it is firing if script tag is after elements in html. I tried your code with external JS and etc. - didn't work.

Try like this: JSFiddle

EDIT 2: You should put your handler in $(document).ready() function anywhere you want, that's the reason.

$( document ).ready(function() {
 var $all = $("#all");
 $all.on("click", function(){
    alert("click");
 });
});
Tinmar
  • 370
  • 4
  • 23
1

replace $(function() to function ()

ascii
  • 64
  • 6