JQuery and event bubbling... AGAIN

I am roughly working with the following:

var i;
var k = 5;
$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        });
    }
});
my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}

'my_function()' fires when I click on '#someElement', as expected, but the alertbox pops up 5 TIMES!!!.

A quick and obvious solution would be to place the contents of my_function() and place them into the if control statement attached to '#someElement', but I am very keen to keep the structure I've outlined, and am sure there's a simple way to do so.

Any ideas?

UPDATE

I originally assumed that the problem was with the function call from within my 'click' event. It wasn't, I think the p开发者_如何转开发roblem may have something to do with the nested 'ajaxComplete' call:

var i = 0;

$('document').ready(function () {

    $('<div id="someElement">Click me</div>').appendTo('body');
    $('<div id="myDisplay"></div>').appendTo('body');
    $('#someElement').click(function (e) {
        i++;
        $.get("test.html", function(html)
        {       
            $(html).ajaxComplete(function()
            {
                my_function(i);
            });
        });

    });

});

function my_function(n)
{

    switch (n)
    {

    case 1:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 2:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 3:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break

    default:
        alert('A great detective always breaks the case. :)');
        break

    }

}

I've omitted the constant 'k', as the case statements render the 'if' statement from the previous example useless. The code above provides a better illustration of the problem I've encountered.

Any help will be much appreciated. :)

Edit based on updated question:

The issue is that you're calling $.ajaxComplete() in your callback. You should get rid of that. The anonymous callback function is all you need.

The purpose of $.ajaxComplete() is to setup a default function to run when any ajax request completes. If this is what you want, you should take it out of the current callback, and just place it in the .ready() call so that it only runs once.

The way you're doing it right now, for each click (and successful response) you're adding another identical handler. So after you click 5 times, it now has 5 of the same click handler.

From the docs: http://api.jquery.com/ajaxComplete/

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

Original answer

This must not be your actual code, because it won't run at all the way you have it.

You don't have a function declaration for your function. You need to initialize i with a value like 0, and your closing parenthesis for the click handler is misplaced.

That said, your code works fine for me when corrected.

Try it out: http://jsfiddle.net/sGWjL/1/

If the alert pops up 5 times for you, then you need to paste more (or actual) code being used.

var i = 0;
var k = 5;

$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        }
    });
});

function my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}​