丢失 jQuery 灯箱弹出窗口
我正在尝试将带有弹出灯箱的链接的代码部分移动到页面上的另一个位置。我只需要使用 javascript/jquery 命令来完成此操作。我正在将 id="winning-designs" 的 div 移动到 id="intro-examples" 的 div。这是我所拥有的：
$("#intro-examples").empty();
$("#intro-examples").html("< div id='wining-designs' class='product-section'>"+$("#wintro-designs").html()+"< ; /div>");
我的问题是，当我这样做时，html 中应该在灯箱中打开的链接不会弹出灯箱。它们的作用就像普通链接一样。为什么我失去了这个功能？谢谢。
div 标签中的空格实际上并不存在。由于某种原因，我必须添加它们才能让 div 出现在这个问题中。
好吧，如果我做不到这一点，我就要开始哭泣了！这是我试图影响的 html：
<li class="winning-design">
<!-- thumb -->
<a href="#" class="lightbox-trigger" title="View case study" data-lightbox-target="winning-design1-lightbox">
<img src="/static/images/category-product-pages/logo-design/example1-thumb.png" width="268" height="160" />
<p class="larger-link">View case study</p>
</a>
<!-- lightbox -->
<div id="winning-design1-lightbox" class="lightbox winning-design-lightbox">
<div class="lightbox-content">
<div class="winning-design-info">
<h3>Carplanet.com.au</h3>
<p>Carplanet.com.au is an Australian based website that reviews new cars. They didn't have a predefined brand or color scheme in mind, so allowed designers to have complete artistic freedom for this logo.</p>
<ul>
<li class="contest-stat">Paid <span class="symbol">$</span><span class="amount">709</span></li>
<li class="contest-stat">Received <a href="/logo-design/contests/car-review-company-requires-logo-36577" title="View contest">202 designs</a></li>
</ul>
</div>
<div class="winning-design-feature">
<div class="enlarged-image-wrapper">
<a href="/logo-design/contests/car-review-company-requires-logo-36577">
<img data-src="/static/images/category-product-pages/logo-design/example1-large.png" />
</a>
</div>
</div>
</div>
</div>
</li>
I'm trying to move a section of code with links that pop up a lightbox to another place on the page. I need to do this with just javascript/jquery commands. I'm moving the div with id="winning-designs" to the div with id="intro-examples". Here's what I have:
$("#intro-examples").empty();
$("#intro-examples").html("< div id='winning-designs' class='product-section'>"+$("#winning-designs").html()+"< /div>");
My problem is that when I do this, the links in the html that are supposed to open in lightbox are not popping up the lightbox. They're just acting like normal links. Why am I losing this functionality? Thanks.
The spaces in the div tags are not actually there. For some reason I had to add them to get the divs to show up in this question.
Ok, I'm about to start crying if I can't do this!!! Here's the html I'm trying to affect:
<li class="winning-design">
<!-- thumb -->
<a href="#" class="lightbox-trigger" title="View case study" data-lightbox-target="winning-design1-lightbox">
<img src="/static/images/category-product-pages/logo-design/example1-thumb.png" width="268" height="160" />
<p class="larger-link">View case study</p>
</a>
<!-- lightbox -->
<div id="winning-design1-lightbox" class="lightbox winning-design-lightbox">
<div class="lightbox-content">
<div class="winning-design-info">
<h3>Carplanet.com.au</h3>
<p>Carplanet.com.au is an Australian based website that reviews new cars. They didn't have a predefined brand or color scheme in mind, so allowed designers to have complete artistic freedom for this logo.</p>
<ul>
<li class="contest-stat">Paid <span class="symbol">lt;/span><span class="amount">709</span></li>
<li class="contest-stat">Received <a href="/logo-design/contests/car-review-company-requires-logo-36577" title="View contest">202 designs</a></li>
</ul>
</div>
<div class="winning-design-feature">
<div class="enlarged-image-wrapper">
<a href="/logo-design/contests/car-review-company-requires-logo-36577">
<img data-src="/static/images/category-product-pages/logo-design/example1-large.png" />
</a>
</div>
</div>
</div>
</div>
</li>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您将失去该功能，因为该功能在页面加载后立即应用。您创建的任何新元素（这正是您在
.html()方法中所做的事情）都没有灯箱功能。我对灯箱库不够熟悉，无法告诉您需要执行哪些确切代码，但我想您可以在一组特定元素上调用一些函数，以便将灯箱功能应用于这些元素。因此，您需要在创建新元素后对其调用相同的函数。
You're losing the functionality because that functionality is applied immediately once the page has loaded. Any new elements you create--which is precisely what you're doing in the
.html()method--do not have the lightbox functionality.I'm not familiar enough with the lightbox library to tell you what exact code you need to execute, but I imagine that there is some function you call on a certain set of elements in order to apply the lightbox functionality to those elements. You therefore need to call that same function on the new element you're creating after creating it.
您可以尝试在单击事件上使用 $.getScript() 方法来应用js。不知道那有多脏......
you could try the $.getScript() method on the click event to apply the js. not sure how dirty that is...