Question

Here’s a fiddle illustrating the problem. I am adding a jQuery one binding on the click of one element to the ‘html’ element. I am not expecting the ‘one’ event handler to fire until the next click, but it fires on the click that adds the binding. This seems to not be a problem if it is a more specific element that the ‘one’ event handler is added to, but it happens when I use ‘html’ or ‘body’ as the element, which is what I want to do.

This doesn’t make sense to me, I’d think the first click would add the one for the next click and it wouldn’t fire on the click on the link.

By the way, my actual problem could probably be solved in a better way, but I came across this and was curious why it didn’t work as I expected.

---

Code:

html:

<div id='hello'>hello</div>
<a class="title" href="#">this example</a> is a test​

js:

$(function() {
    $('a.title').click(function() {
        var htmlClickBind = function (e) {
            console.log('clicked on html, e.target = ' + e.target);
            console.log(e.target == '');
            if (!$(e.target).is('a') ) {
                console.log('cleared click event');
            }
            else {
                $('html').one('click', htmlClickBind);
            }
        };

        $('html').one('click', htmlClickBind);
    });
});​

Answer 1

The click event on the a.target element bubbles up to the html element, where your (just-added) handler sees it.

To prevent this, use event.stopPropgation in your a.target click handler (or return false, which does stopPropagation and preventDefault).

Updated code (see the comments): Live copy

$(function() {
    // Accept the event arg ----v
    $('a.title').click(function(e) {
        // Stop propagation
        e.stopPropagation();
        var htmlClickBind = function (e) {
            console.log('clicked on html, e.target = ' + e.target);
            console.log(e.target == '');
            if (!$(e.target).is('a') ) {
                console.log('cleared click event');
            }
            else {
                $('html').one('click', htmlClickBind);
            }
        };

        $('html').one('click', htmlClickBind);
    });
});​