Multiple event handlers created when reopening fancyBox - fancybox

Question

On the calling page, I bind my fancyBox using an href, like so:
<a id="myId" href="myContent.cfm">Click me</a>
<script>
$(document).ready(function(){
$('a#myId').fancybox({
// my initialization params
});
});
</script>
In myContent.cfm, a default "filter" is built, which has add and delete buttons. Something like this:
<div id="fd_0" class="eachFilter blank">
<select name="filterBy" class="fl filterBy">
<option selected="selected">-- Add a Filter --</option>
<!--- add more options --->
</select>
<button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button>
<button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button>
</div>
When the addFilter button is clicked, a new "default" filter is added to the dom after the filter that was clicked, using consecutive ids. Conversely, clicking the deleteFilter button causes that filter to be deleted and all remaining filters to have their ids renumbered; with the exception that there must be one filter remaining. My original code used .live() to attach event handlers to the newly created elements, like so:
$('.addFilter).live('click', function(){
// get number of existing filters
// create new blank filter
// add to the dom after the filter whose button was just clicked
});
$('.deleteThisFilter).live('click', function(){
// if there is more than one existing filter, use .remove() to remove the parent .eachFilter div
// renumber the existing filter ids consecutively
});
After the user has created all the "filters" they need, they may either "apply" them, which closes the fancybox and reloads a grid with the new, filtered parameters, or simply cancel and close the fancybox.
This all works fine the first time, and on reopening the fancybox, the initial blank filter's add button works as expected. However, after adding a second filter, any filter that was added to the dom has multiple event handlers added to the addFilter and deleteFilter buttons. If I added one filter the first time, then return to the fancybox the second time, then add a filter by clicking on the default filter's add button, then click on the newly created filters add button, two more filters are added. If I close, reopen the fancybox a second time, add a filter, and click on that filters add button, three more filters are added.
So here's what I've tried so far:
1) Changing the .live() calls to
$(document).on('click', 'addFilter', function(){ // add my filter code});
2) Putting the code to create the filters into a function, which at the end uses .bind() to add the event handlers to the newly created filters; followed by using
$('.addFilter').unbind('click', fnCreateMyFilter())
on closing the fancybox.
3) Using .live() ONLY on the newly created filter elements, and a regular click handler on the default element
4) Upgrading jQuery to 1.8.3 from our current version
5) Calling .remove() on all elements inside the fancybox .onClosed function (although I was under the impression that closing fancybox does actually remove the elements from the dom).
Any thoughts?

Answer 1

As always, it's the most obvious thing which isn't readily apparent. Moving the .js code out of the popup into its own file fixed the problem, which is something that I had intended to do after getting all the code to work.

Answer 2

I was using a combination of Fancybox2 http://fancyapps.com/fancybox/ and Noty popups http://needim.github.com/noty/ and having a similar problem.
I loaded a product edit form into a fancybox via ajax using class='fancybox.ajax' in the href link.
Everything saved fine when I clicked my save button until I reloaded another (or the same) product in fancybox.
I was using this code to trigger my save buttons:
$(document).on("click",".save_product_button",function(){
... post to ajax file to save info
});
Using that triggered multiple noty popups and saves (once for each time I'd loaded a fancybox since refreshing), because the save button was already loaded in the document model that many times. (I guess??)
But when I changed my on() to the save button's immediate parent, all my problems went away.
$("#productBox").on("click",".save_product_button",function(){
... post to ajax file to save info
});
Everything saved once from then on.
Plus, that should make the code a tad quicker.
Hope this helps someone not waste half a day like I just did.