We Keep Coding

What's the smartest way to refresh dom handlers after new ajax-loaded content?

I'm working with a large template of charts and other widgets. I also manually implemented some ajax tabs. Now whenever those tabs load new content (charts), the problem is that all the template scripts in the head tag won't work with those ajax-loaded elements anymore.
I know, normally you would use .live for this kind of problem, but this would mean to go into the whole 50k lines-js template and change everything to .live calls... Not really able to do that.
Is there instead a jquery way of reloading/reactivating all the scripts within the head-tag?

First off .live() has long since been deprecated and even removed from the latest versions of jQuery. You should never be thinking of using .live().
Second, as it sounds like you already know, the "right" way to fix this is to change your code to use the delegated form of .on() which is what replaced .live(). Yes, change all the code that does it the wrong way. Here's a post on using the delegated form of .on() instead of .live().
Third, a work-around would be to put all your initialization code that hooks up these event handlers into a single function (or called by a single function). Then, you call that single function upon initialization and then you can call that single function any time later after you reload your content. The trick is that you can only put code into that initialization function that can be called or should be called more than once after you content has been reloaded. If you put some event handlers in there that should not be in there, then you may get duplicate event handlers installed. So, only event handler initialization that applies to the replaced content should go in this function.
Suppose that function was called initDynamicContent, then it could look like this:
// init event handlers on the original version of the dynamic content
$(document).ready(initDynamicContent);
Then, sometime later after you replace the dynamic content, you can just do:
// code here that replaces the dynamic content with new content
initDynamicContent();
There is no magic jQuery way for this to happen automatically. jQuery has absolutely no way of knowing which code should be run again and which code should not.

Add jquery to a html element that is added dynamically

I have <video> elements added to the page when an image is clicked. A light box with the video pops up. What would be the best way to execute a snippet of jquery to this dynamic video element? I though maybe some form of the .on method might work was not sure.
Edit: I'm using ilightbox for the lightbox which has code that adds in a html video after a lightbox image is clicked.

.on working good for new element in Document object model(DOM)
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()
reference on

bind('keyup') not working on content injected after the dom is loaded

I have a list of inputs and when the user enters a specific key, something happens. This works great but there is also a button to fetch content from a server (JSON) and then add it to the dom (HTML) after it has been formatted (Markup.js). The problem is that on the inputs that are injected after the dom is loaded the keyup events do not register. What is causing this problem?

Use .on() instead of .bind().
For earlier versions, the .bind() method is used for attaching an
event handler directly to elements. Handlers are attached to the
currently selected elements in the jQuery object, so those elements
must exist at the point the call to .bind() occurs.
See jQuery - how to use the "on()" method instead of "live()"? on how to use .on(), and https://stackoverflow.com/a/14354091/584192 for examples on how to migrate existing code.

You must to bind the events AFTER the injection of the inputs. Can you post you're relevant code to better answer this question?

.live() does not behave like .bind()

After asking this question : jQuery die() does not work. I found that live() does not seem to behave like bind().
I had the following line:
$('.produit').die().live('change',function(){ // the rest
$('.produit').live('change',function(){ // that did not work either
Then I changed it to:
$('.produit').unbind('change').bind('change',function(){ // the rest
What is the difference between the two lines.
In this example .produit is added dynamically to the page. And the binding is done after the prepend().
I'm using jQuery 1.4.2, and IE7.

If you use IE there is some problem with live and change event
search for livequery plugin which solves this.
try to change the event to Click event and youll see that it works.
The difference is that Bind is for Already In Page elements and live is also+Future elements.

Live does not behave like bind. That is correct.
Live attaches a handler for only predefined actions (like click or keypress). With bind you can define your own events and trigger them however you deem necessary.
All in all, in the end, it is better to use bind over live. That is why in the newest jQuery 1.7 (which you are not using) there is the functions on and off which basically combines the functionality of live, bind, and delagate

jQuery UI - when should I use destroy method on the widgets

When I attach functionality to an element do I need to call .widgetName('destroy') before removing it from the DOM or does jQuery handle this?

Try using remove .
I don't think this happens automatically, but then again, I don't think you need to call the destroy method as the event handlers are destroyed for you from the remove call.