JQuery duplicating javascript to document using ajax

In the left menu is use this script to load a new page in a div:

$("#button").live('click',function(){
                $("#content")
                .html(ajax_load)
                .load("page.html");
            });

In the page.html there's some javascript to add some UI elements using ajax (also with jquery).

When i click the same left 开发者_运维百科menu item 5 times (so the divs loads 5 times), it seems that the javascript in page.html gets copied. when i call a function in the page.html its get executed 5 times!!

How to fix this?

If you use live() for anything inside page.html the event handler will persist even if a new page.html is loaded that's probably why you have the same execution multiple times.

What javascript executions are happening in "page.html" Are they event bindings? If so, look at the .live() method and pull the javascript out of your page.html file. When the elements of the page.html are brought into scope they will be correctly handled by the bindings in the live() method.

If you are doing something else, please provide more context.