ansaurus

Question

Answer 1

A:

Hey Kenny,

Check out the following link to clarify event bubbling: http://www.quirksmode.org/js/events_order.html

You can prevent bubbling by just returning "false" from the event handler:

$('.bggallery_images').click(function () {      
    alert('test');
    return false;
});

Edit: This code works without producing two alerts so it must be something external to this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"&gt;
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
</head>
<body>
    <div id="gallery_lightbox" style="height: 215px; z-index: 4; display: block;">
        <div id="close"></div>
        <h2>
            <cufon class="cufon cufon-canvas" alt="Velg " style="width: 39px; height: 20px;">
                <canvas width="49" height="23" style="width: 49px; height: 23px; top: -4px; left: 0px;"></canvas>
                <cufontext>Velg</cufontext>
            </cufon>
            <cufon class="cufon cufon-canvas" alt="bakgrunnsbilde" style="width: 123px; height: 20px;">
                <canvas width="129" height="23" style="width: 129px; height: 23px; top: -4px; left: 0px;"></canvas>
                <cufontext>bakgrunnsbilde</cufontext>
            </cufon>
        </h2>
        <div class="bggallery_images">testererererer</div>
        <img src="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
        <img src="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
    </div>

    <script type="text/javascript">
        $('.bggallery_images').click(function () {      
            alert('test');
        });
    </script>
</body>
</html>

Steven Paligo 2010-05-06 18:21:11

I already tried this and it does not fix the problem. What does that imply?

Kenny Bones 2010-05-06 18:28:17

It might not be a bubbling problem then. Do you have that same alert on any element that contains and an image?

Steven Paligo 2010-05-06 18:33:27

If I understand you correctly, do I have another alert connected to a class or id that these images are contained in? No I do not. Tried searching the js file for that word (alert) and there's just one result.

Kenny Bones 2010-05-06 18:36:48

Hm, well that's frustrating. :)Try this: $('.bggallery_images').click(function (e) { alert('test'); if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); });By the way, which browser are you using?

Steven Paligo 2010-05-06 18:47:05

I'm using FireFox. It also happens in IE. Tried your snippet and the alertbox appear twice.. I just love how things like this happen :)

Kenny Bones 2010-05-06 18:55:44

Can you post the HTML/JavaScript from the rendered page somewhere? I'd like to play around with it if I can.

Steven Paligo 2010-05-06 19:04:50

Like the output from FireBug? I can do that I suppose. Just to add some info, I created a div with the same class as the ones the images use and it alert came twice as well. Looks like its got nothing to do with img tags thenEdit: Updated the code and I know it looks like crap.. Also, I don't think the image tags are unclosed. Because notice the div in there with the same class and some dummy text inside? It happens there as well.

Kenny Bones 2010-05-06 19:10:14

Check out the edit above. That code works without producing two alerts. I'd compare it to what you have and see what's functionally different.

Steven Paligo 2010-05-06 19:54:41

Yeah, see my updated post for my js file. I think the problem is in that one. Tried removing the click handler from the function I was using it in "function gb_gallery()" and moved it to document ready instead. And the problem doesn't exist there.

Kenny Bones 2010-05-07 05:17:19

Answer 2

A:

I've created a test page from the html and js instruction you posted and can't reproduce your error- the alert only fires once. I'm using this for a jquery reference:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;

and this at the end to start things up

<script>

    $('.bggallery_images').click(function() {
        alert('test');
    });

</script>

you're doing something you're not telling us about or firebug is lying to you. it's possible the html that firebug is showing you (as it's interpreted) is different than the physical source of the page. can you post a complete example of your output which demonstrates the problem?

lincolnk 2010-05-06 20:34:15

I noticed something just now. If I remove this js snippet from the original function it was in and put it in document ready, it only fires once. I've updated the first post to include the entire js.js file I use.

Kenny Bones 2010-05-07 05:12:55

Answer 3

A:

You might want to have a look at the jquery .bind() method.

The following is taken from the jquery docs page

Example: Cancel a default action and prevent it from bubbling up by returning false:

$("form").bind("submit", function() { return false; })

Example: Stop an event from bubbling without preventing the default action by 
using the .stopPropagation() method.

$("form").bind("submit", function(event) {
  event.stopPropagation();
});

andreas 2010-05-06 20:49:32

ansaurus

tags:

views:

answers:

Event bubbling with img tags?

related questions