Sometimes you want a pop up window on a username, or a video. There are plenty of popup plugins out there for jQuery developers. But what happens if you want a popup on something that doesn’t exist on your page yet? What if ajax returns some information and you have no access to a success callback?

I’m going to show you how to use the live(); function to simulate adding popup windows to content that is dynamically created.

So you have your page and you are waiting for some elements to become created, in order to add your popup. The main thing you want to do is simply get your popup function in before  the click event. In this case our listener we want to add is on “.content a”. Any child of content thats a link will trigger the function “popUp” whenever they are hovered. Just insert the code below.

$(".content a").live("mouseover",popUp);

Now it’s important to know that you want to unbind your elements otherwise you could trigger multiple popups. The plugin i used is popUpWindow.js and can be found Here. Now just make your “popUp” function as shows.

function popUp()
{
	$(".content a").unbind();
	$('.content a').popupWindow({ 
		height:500, 
		width:800, 
		top:50, 
		left:50 
	});
}

This essentially means that you are unbinding and rebinding the elements on hover. Effective for most uses.