On click button is not calling function

Question

For some reason the alert is not being called, can someone please help me debugg this?

$(document).ready(function () { 
    // Keep filter hidden
    //$("#filter_bar").hide();

    $('#filter_bar').click(showFilterBar);

});

function showFilterBar(){
    alert('got in here');
    if ($("#filter_bar").is(":hidden")){
        $("#filter_bar").show();
    } 
    else
    {
        $("#filter_bar").hide();
    }
}

http://jsbin.com/imevax/1/edit

MickJ · Accepted Answer · 2013-06-21T18:11:08.807

2

You forgot to include JQuery :)

Working for me(Chrome):

http://jsbin.com/imevax/22/edit

All I did was include JQuery.

Edit: Updated to point to latest 1.x jquery version in a safe way as per @mattijo's suggestion.

edited Jun 21 '13 at 18:11

answered Jun 21 '13 at 17:52

MickJ

2,127
3
20
34

My jquery is working on the page, but just not for the on click. – AustinT Jun 21 '13 at 17:52
Your reference to jquery may not be working. Are you using the CDN ("//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js") ? – sturdynut Jun 21 '13 at 17:55
Oh nevermind, it was a mistake, I was calling the wrong button – AustinT Jun 21 '13 at 17:55
@Austin - the JSBin you posted did not have JQuery included. You could see in the console - "Uncaught ReferenceError: $ is not defined ". Once I included JQuery it started working for me. – MickJ Jun 21 '13 at 17:58

score 0 · Answer 2 · answered Jun 21 '13 at 17:51

0

$(document).ready(function () { 
// Keep filter hidden
//$("#filter_bar").hide();

    $('#filter_bar').click(function(){
       alert('got in here');
       if ($("#filter_bar").is(":hidden")){
          $("#filter_bar").show();
       } 
       else
       {
          $("#filter_bar").hide();
       }
   });

});

You start jQuery events/functions etc like this:

$('#whatever').whatever(function(params){
  //code here
});

answered Jun 21 '13 at 17:51

cptnk

2,430
18
29

Can I not call a function? – AustinT Jun 21 '13 at 17:53
cant you call the function like this? $('#filter_bar').click(function(){whatever();}); – cptnk Jun 21 '13 at 17:57
@cptnk he may not want to if he's calling the function in multiple places. In certain cases `name = function(){ ... }` can be advantageous. – CodeMoose Jun 21 '13 at 18:02
@CodeMoose I just searched in stackoverflow and apearently he did it the right way. http://stackoverflow.com/questions/2520172/call-user-defined-function-in-jquery – cptnk Jun 21 '13 at 18:05

score 0 · Answer 3 · answered Jun 21 '13 at 17:56

I got it working by changing the way you define your function:

showFilterBar = function(){
    alert('got in here');
    if ($("#filter_bar").is(":hidden")){
        $("#filter_bar").show();
    }else{
        $("#filter_bar").hide();
    }
};

$(document).ready(function () { 
    // Keep filter hidden
    //$("#filter_bar").hide();

    $('#filter_bar').click(showFilterBar);
});

Live: http://jsbin.com/imevax/15/edit

On click button is not calling function

3 Answers3