How can I get event bubbling to work when a div is clicked the first time?

Question

I'm making a calendar. I want the user to be able to click anywhere inside a particular day (table cell) and something happens. There may be events for that day, which are contained inside a div within the table cell. If the user clicks on the div, then something else happens. I have managed to prevent event bubbling when the user clicks on doSomethingElse(), but it doesn't work the first time it is clicked. It only works on subsequent clicks, never on the first click. Why doesn't the cancelling of event bubbling work on the first click, and only works on all subsequent clicks?

HTML:

<table>
    <tr>
        <td onclick="doSomething()">
            <div class="view" onclick="doSomethingElse()">Text</div>
        </td>
    </tr>
</table>

Javascript:

function doSomethingElse() {
    $('.view').click(function(e){
        e.cancelBubble = true;
        e.returnValue = false;

        if (e.stopPropagation)
        {
            e.stopPropagation();
        }
    });

    $('#myID').load('myFile.php');
}

UPDATE: I put this on my page:

<script>
$(document).ready(function() { 
    $('.view').click(function(e){
        e.cancelBubble = true;
        e.returnValue = false;

        if (e.stopPropagation)
        {
            e.stopPropagation();
        }
    });
});
</script>

Then, the onclick="doSomethingElse()" just contains the rest of my script. The problem is that doSomethingElse() has parameters, so it seems like I need to still have the following:

<div class="view" onclick="doSomethingElse(id1,id2)">Text</div>

It still only works on the 2nd, 3rd, ... clicks, but not the first.

score 1 · Accepted Answer · answered Jun 06 '12 at 18:45

1

Because you've effectively written binding code in your onclick handler. Put your click binding (the $('.view').click part) in your document ready. Also, why is the load outside the handler?

answered Jun 06 '12 at 18:45

Jeff Watkins

6,343
16
19

this should definitely be right. the first time the user clicks the div, doSomethingElse is called, which simply binds a new click handler (can't call it yet, because it is being bound right then and there). from then on, any click should call both doSomethingElse (which binds yet another click handler) AND the already bound click handlers from that function...which is redundant and unnecessary (yet not exactly harmful) – Ian Jun 06 '12 at 18:48
Thanks for the comments. I'm not sure what you mean by 'Put your click binding (the $('.view').click part) in your document ready.' – John Anderson Jun 06 '12 at 22:19
ok, that $(".view").click is a binding only (i.e. binding elements with that class to the click event, not actually executing the code within the handler). So, you'll want that binding to be made before the user does any clicking. You should put it in a "$(document).ready(function() { });" block. Remove the explicit onclick="doSomethingElse()" in the markup as it is redundant. – Jeff Watkins Jun 06 '12 at 22:26

How can I get event bubbling to work when a div is clicked the first time?

1 Answers1