Search code examples
jqueryjquery-uijquery-widgets

Apply one instance of a jQuery plugin to multiple elements?

I'm writing a popup widget that inherits from ui.dialog and I'm wondering if there is a way to reuse the same popup instance on many elements. For example, say I have this html:

<a class = "pops" href="">test</a>
<a class = "pops" href="">test2</a>
<a class = "pops" href="">test3</a>

If I call $(.pops).popup(options), popup's _create method will be called 3 separate times and I'll have 3 instances of it on the page. I'd like to instead create one popup whose position, size and content are modified depending on which link triggers it to show.

When a new instance of popup is created, a (hidden initially) popup div is appended to the page with a child div to hold the content of that popup. So you can imagine that a lot of space would be taken up storing the pointers to all the different popups created.

My intuition is that having just one reusable popup would be more efficient than having 3 separate ones, especially since I only want one open at a time. Is my intuition incorrect?

Solution

  • Short version to re-use the same element, i.e. div#popUpDiv:

    $('.pops').live('click', function(){
    $("#popUpDiv").html($(this).html());
});