Search code examples
javascriptjqueryajaxeventsevent-bubbling

Weird Bubbling Issue


I'm not sure why this is bubbling, but it is. Wondering if anyone has any ideas?

$('#file_upload').live('submit',function(event){
        $('#file_upload').attr('action','io.cfm?action=updateitemfile&item_id='+$('.agenda-modal').attr('data-defaultitemid'));
        $('iframe').load(function(){
            $('.upload_output').empty();
            $livepreview.agenda({
                action:'get',
                id:$('.agenda-modal').attr('data-defaultitemid'),
                type:'item',
                callback:function(json){
                    for(x in json[0].files){
                        $('.upload_output').append('<li class="file-upload"><a target="blank" href="io.cfm?action=getitemfile&item_file_id='+json[0].files[x].item_file_id+'">'+json[0].files[x].file_name+'</a> <a style="color:red" href="#deletefile-'+json[0].files[x].item_file_id+'">[X]</a></li>');
                    }
                    console.log('callback');
                }
            });
            console.log('iframed');
        });
        console.log('go');
    });

So, if I upload a files i get the following in my console:

go
iframe
callback

If i do it a 2nd time in a row:

go
iframed
iframed
callback
callback

and three times:

go
iframed
iframed
iframed
callback
callback
callback

etc.

I assumed if the live() event was bubbling "go" would bubble also, but it isn't. I tried event.stropPropagation just about everywhere inside of the submit, and .die() connected to the $('#file_upload').die().live(... like so.

Any ideas?

P.S. This live() call is just inside a jQuery doc load ($(function(){...});)


Solution

  • If you use one your issue should be resolved.

    $('iframe').one("load", function() {