Weird Bubbling Issue

Question

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(){...});)

Answer 1

If you use one your issue should be resolved.

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

Answer 2

It's because you're attaching a new/additional .load() handler each time, this means the one your just added and all previous load event handlers are all running. If you want the handler to only run once, use .one(), instead of this:

$('iframe').load(function(){

use this:

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

or, a bit more wasteful but you could .unbind() each time:

$('iframe').unbind('load').load(function(){