灯箱不显示 Jquery答案

【问题标题】：Lightbox not showing Jquery灯箱不显示 Jquery
【发布时间】：2014-07-12 04:01:49
【问题描述】：

我试图在我的 HTML 表格中选择一个链接时显示一个弹出框。

这是我的桌子：

<table width="1150" border="0" cellspacing="0" cellpadding="0">
  <tr class="inner1-top">
    <td class="name">NAME</td>
    <td class="company">COMPANY</td>
    <td class="position">POSITION</td>
    <td class="mc">MC #</td>
    <td class="dot">DOT #</td>
  </tr>
  <tr class="inner2-top">
  </tr>
</table>

我使用以下 Javascript 填充该表：

$('.inner2-top').append('<tr><td class="name"><a href="#">'+ 
  object.get('username') + '</a></td><td class="company">' + 
  object.get('company') + '</td><td class="position">' + 
  object.get('position') + '</td><td class="mc">' + 
  object.get('mc') + '</td><td class="dot">' +
  object.get('dot') + '</td><td>');
})(jQuery);

我正在努力做到这一点，所以当点击名称时，我的弹出框会显示：

$(document).ready(function(){           
  $('.name1 a').click(function(e) {
    $('.popup1').lightbox_me({

    });

不幸的是，这不起作用。有什么想法吗？

【问题讨论】：

什么是lightbox_me？能提供一个关于jsfiddle的demo吗？
如果你想将jQuery事件绑定到动态添加到DOM的元素，试试$(document).on('click', '.name a', function(){CODE GOES HERE});
欧文。 Lightbox 是一个简单的弹出框类。
@user3792038: beercodebeer 是对的，如果你想支持动态添加的元素，你必须以不同的方式将元素绑定到你的函数。请注意，要应用的代码取决于 jquery 参考。过去是“直播”，但现在是“开”。参考本站sitepoint.com/on-vs-live-review
@beercodebeer 我将如何使用我现有的结构进行格式化？

标签： javascript jquery html css

【解决方案1】：

为了使用 document.on 将 jQuery 事件绑定到动态添加的元素，使用现有结构，请尝试以下操作：

$(document).ready(function(){
    $(document).on('click', '.name a', (function(e) {
        e.preventDefault();//to prevent the browser from following the link or reloading the page
        $('.popup1').lightbox_me({
            //whatever other code is necessary for your lightbox
        });
)};

jQuery documentation

【讨论】：

非常感谢您的帮助。