jQuery Dynamic Selector and Element

Question

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?

From this page example i found that You missed # in rel="vidPreview-1".Please check it or forget to post it here? — sathishkumar
– sathishkumar, Commented Jan 25, 2012 at 11:34

sathishkumar · Accepted Answer · 2012-01-25 11:42:35Z

2

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>

answered Jan 25, 2012 at 11:42

sathishkumar

1,8564 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramil Over a year ago

Thanks for the help, it works now in modern browsers. However, it won't work in IE8 and IE7, it still shows and error: Error: Exception thrown and not caught

YuriBro · Accepted Answer · 2012-01-25 11:36:03Z

0

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.

answered Jan 25, 2012 at 11:36

YuriBro

91212 silver badges28 bronze badges

1 Comment

Stefan Over a year ago

"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()." api.jquery.com/live

Collectives™ on Stack Overflow

jQuery Dynamic Selector and Element

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related