CODEWITHSUNDEEP
jqueryjquery-tools
Ramil
Ramil

Reputation: 91

jQuery Dynamic Selector and Element

jsFiddle Full Code: http://jsfiddle.net/bvmdW/

I used jQuery Embedly to replace YouTube links with thumbnail and videos. I hide the videos part using display:none in CSS. The Embedly script will dynamically create the following DOM during the process:

<li id="1">
    <img rel="vidPreview-1" class="embedly" src=".....">
    <div id="vidPreview-1" class="vidPreview"> iframe videos here </div>
</li>
<li id="1">
    <img rel="vidPreview-2" class="embedly" src=".....">
    <div id="vidPreview-2" class="vidPreview"> iframe videos here </div>
</li>

Both <img rel="vidPreview-X" and <div id="vidPreview-X are dynamically generated by Embedly.

Now, I'll also use jQueryTools Overlay plugin to popup the hidden videos upon clicking the thumbnail. I used:

$("img[rel]").live('click', function () {
    $(this).overlay().load();
});

but it seems the Overlay plugin doesn't recognize live(). In Firebug it says that: uncaught exception: Could not find Overlay: vidPreview-X

Can someone please guide me how to make a live() with jQueryTools Overlay?

Upvotes: 1

Views: 1003

Answers (2)

sathishkumar
sathishkumar

Reputation: 1816

In img tag you missed # in rel attribute.Please add # to the rel attr value.Check again.

 <li id="1">
     <img rel="#vidPreview-1" class="embedly" src=".....">
     <div id="vidPreview-1" class="vidPreview"> iframe videos here </div> </li> <li id="1">
     <img rel="#vidPreview-2" class="embedly" src=".....">
    <div id="vidPreview-2" class="vidPreview"> iframe videos here </div> </li>

Upvotes: 2

YuriBro
YuriBro

Reputation: 902

I'm not sure, but try to use delegate function http://api.jquery.com/delegate/ I've faced with strange behavior of live for a few times.

Upvotes: 0

Related Questions