does jquery off / unbind etc recursively detach all events to current selector AND children?

Question

I'm creating a web application and will be doing my own testing anyway to confirm but wanted to know if anyone had experience with this when bind / unbind etc. For example I want to first destroy the current content container's events and children's events, then load in and attach new events based on remote script upon loading the new content into the DIV. I can traverse but thought if it already does would be nice to know. This approach hypothetically would scale in terms of keeping complexity down as long as I'm keeping the event scope to the content DIV.

Per request I'm explaining the purpose behind what I'm doing.

I'm looking to create a maintainable AJAX web app. Imagine you can add hundreds of pages/scripts to it and the callee does not need to know anything about it other than its URL as you are requesting new things. This is what I'm going for. I've done this using iframe overlays and works well but my main concern for doing pure AJAX is code left over in memory after its not needed such as events and closure references etc. The iframe overlay has its advantages in that regard as not much thought involved there but its slower to load a new URL each time and that approach does not integrate well if you want parts of the page to be updated over others.

So the thought process is to create a methodology to have a parent DIV that be injected with new HTML via jQuery load method. The load method has the great side effect of executing the script within as well. So if I use that approach, I need to create a system of doing this that does not bloat the browser and leave weird behavior of events etc. This could be another question.

UPDATE

I've answered my question after seeing this popup from a rep up vote. This is really a non-issue if you attach events at the parent level using event bubbling approach. See my answer below.

Answer 1

I'm just following up because its been awhile and I have a very simple solution to that problem.

If you always attach events on the parent node using the event bubbling approach like so:

$('parentSelector')
  .on('click', 'someDescendant', function(ev) {
    // code
  })
  .on('focus', 'anotherDescendant', function(ev) {
    // code
  });

Then removing these events is quite straight forward:

$('parentSelector').off();

So whenever you load your widgets, you can always do this safely:

$('parentSelector')
  .off()
  .on('click.my-widget', 'someDescendant', function(ev) {
    // code
  }).on('focus', 'anotherDescendant', function(ev) {
    // code
  });

The recursion/selector problem is non-existent if you use that approach.