Our approach to dynamic content loading using AJAX has recently involved including functions within the HTML that we load and insert into div elements. For example, if our main HTML page contains a div like this:
<div id="a"></div>
We would load content like this into that div:
<div id="b" onchange="dostuff();">...</div>
<script type="text/javascript">
function dostuff() {
// ...
}
</script>
The dostuff method typically does not contain any server-generated content (such as PHP or JSP). This setup is more of a convenience factor - having JavaScript code alongside the HTML it interacts with makes it easier to locate functions and review related code all in one file.
In a previous project, we often stored functions like dostuff() in a separate .js file (usually containing multiple functions used across various dynamically loaded HTML components), which was loaded once when the main page was loaded. While I personally feel this is a better solution, articulating the pros and cons to my team can be challenging. Perhaps I am mistaken?
One drawback I've observed is that debugging in Firebug becomes more difficult, as breakpoints placed within reloaded functions confuse the debugger. Additionally, there may be a performance degradation as the browser recompiles functions multiple times.