jQuery .click() and alert() issues

Question

I am new to jQuery and am having a few issues. This jsFiddle shows what I am experiencing: http://jsfiddle.net/rE2FH/5/ Note how the button does nothing.

What I am trying to do is set a click listener to the button and have it do an alert();. However, the neither the click event or the alert() is working.

I have tried the click event as .click(), .on(), .delegate(), and .live() none of which seem to work. As for the alert, I cannot find anything other than the equivalent to "It automagically works if you do 'alert([sting]);'!" I am aware the .click() is for 1.7+, .live() is depreciated and even then .delegate() is preferred over it.

In my current project I am using jsp with the script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> HOWEVER, it does not work in the jsFiddle either. This version works fine on some of our other pages (alert and .click events), but for some reason the one I'm currently working on has issues. I have done everything I can see to emulate those other pages as well, but I may be missing something. The guy who wrote that jQuery is no longer with our company.

I have already searched SO, and none of these results have worked for me:

jQuery .click() not functioning

jQuery .click() problem

jquery button not respond to click method

jquery click event issues

+others that are all along the same lines.

Any insight would be appreciated.

You have some syntax errors and misunderstanding of functions: http://jsfiddle.net/e8Nrz/ — Ian, Jul 19 '13 at 15:22

score 2 · Accepted Answer · answered Jul 19 '13 at 15:22

You had several issues. Make sure you check the javascript console for errors. Here's a working version:

http://jsfiddle.net/LxuVy/

$(document).ready(function(){
    $(document).delegate('#but', 'click', buttonClick);

    function buttonClick() {
        $('#res').hide().html("BUTTON!!!").fadeIn('fast');
        alert("Hello!");
    }
});

To break down the issues with yours:

$(document).ready(function(){
    $.delegate('#but', 'click', buttonClick());

    function buttonClick(){
        $('#res').hide().html("BUTTON!!!").fadeIn('fast');
        alert("Hello!");
    }; // this semi-colon shouldn't be here
}; // missing closing paren for ready()

delegate is used like this:

$('selector').delegate(...)

Though delegate() has been replaced by on(), which should be used instead.

Also, buttonClick() should be buttonClick. When you add the parentheses, you are executing the function. What you want to do in this case is pass the function as a parameter.

That worked! Thanks! This actually clarified some code that I wasn't sure what I seeing elsewhere in the project too. And I got the .on() to work as well.\ — sparks, Jul 19 '13 at 17:22

score 2 · Answer 2 · answered Jul 19 '13 at 15:25

You are missing the closing ) from the document.ready:

$(document).ready(function(){
    $.delegate('#but', 'click', buttonClick());

    function buttonClick(){
        $('#res').hide().html("BUTTON!!!").fadeIn('fast');
        alert("Hello!");
    };
});

I would also suggest using .on() like this: http://jsfiddle.net/rE2FH/23/

score 1 · Answer 3 · answered Jul 19 '13 at 15:22

Multiple probleme.

First you need to select an element with delegated (closest static parent)

$(document).delegate(...)

The function in the parameter should not finish with braket

$(document).delegate('#but', 'click', buttonClick);

And you are missing a closing parenthesis.

Fiddle : http://jsfiddle.net/rE2FH/18/

But since your button is static, you can use click directly :

$('#but').click(buttonClick);

Also, delegated is deprecated, you should use .on().

score 1 · Answer 4 · answered Jul 19 '13 at 15:23

I see three problems:

.delegate is also deprecated, you should be using .on. You are also calling it wrong, directly on $. Finally, you're not actually delegating the event to any ancestor, so you could very well be using .click directly.
Instead of passing a function reference when binding the event, you're calling the function (you're passing buttonClick() instead of buttonClick).
You forgot to close a parentheses at the end, causing a syntax error (always check you browser's console, it will show this kind of error).

Fixing all that, your code would be:

$(document).ready(function(){

    // using .click instead of .delegate
    // .on('click', buttonClick) would work too
    $('#but').click( buttonClick );
    // no calling parentheses  -^

    function buttonClick(){
        $('#res').hide().html("BUTTON!!!").fadeIn('fast');
        alert("Hello!");
    }
});
// added missing ) at the end

jQuery .click() and alert() issues

4 Answers4