jquery .click being called multiple times

Question

I am getting unexpected results with jQuery trying to set the \"click\" method of a div. Please see this jsfiddle. Be sure to open the console window. Click the word a few times

Answer 1

You should bind the click event outside the toggleDiv function. The current code will register new click event handler every time the elements in $('#test') is clicked, with exponential growth (since all previous click handler will generate a new click handler, so the number of handlers will double with every click).

Answer 2

You're re-registering the click handler over and over recursively.

One correct solution (of many possible variations) is this:

$(function() {
    var status = false;

    $('#test').click(function() {
        status = !status;
        $(this).html(status ? 'Goodbye' : 'Hello');
    });
});

and then you need to remove the onclick attribute from the HTML - it's not good to mix DOM0 and DOM3 event handling.

See http://jsfiddle.net/alnitak/8aBxp/