jQuery code repeating problem

I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.

jQuery JS:

 $(".pageSaveButton").bind("click",function(){
   var theID = $(this).attr("rel");
   $("#fileuploadframe").load(function(){
     var response = $("#fileuploadframe").contents().find("html").html();
     $.post("siteCreator.script.php",
        {action:"savePage",html:response, id: theID},
         function(data){
           alert(data);
         });
   });
 });

HTML Links ( one of many ):

<a href="templates/1000/files/index.php?pg=0&preview=false" 
       target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>

So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked开发者_如何学编程 on. I have checked my PHP and am pretty positive the fault is with the JS.

I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.

I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)

Thanks ahead of time, Key

From jQuery .load() documentation I think you need to change your script to:

$(".pageSaveButton").bind("click",function(){
    var theID = $(this).attr("rel");
    var lnk = $(this).attr("href");//LINK TO LOAD
    $("#fileuploadframe").load(lnk,
        function(){ 
        //EXECUTE AFTER LOAD IS COMPLETE
            var response = $("#fileuploadframe").contents().find("html").html();
            $.post("siteCreator.script.php",
                {
                    action:"savePage",
                    html:response, 
                    id: theID
                },
                function(data){alert(data);}
            );
    });
});

As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.

This is because the line

$("#fileuploadframe").load(function(){

Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.

If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.