jquery颜色框问题答案

【问题标题】：jquery colorbox problemjquery颜色框问题
【发布时间】：2012-01-25 03:34:27
【问题描述】：

嗨朋友们，当 ajax 完成时，我通过 ajax 在我的页面上显示一些数据，我单击查看信息，颜色框不起作用，但我显示没有 ajax 的数据，我单击颜色框链接它的工作和打开

为什么当数据来自 ajax 时 javascript 不起作用

谢谢

$.ajax({
  url: "remote.php?act=ShowContacts&id="+id,
  cache: false,
  success: function(html){
    $("#displaycontacts").html(html);

  }
});

    $("#viewcontact").colorbox({width:"500px", height:"520px", iframe:true});

<a href="viewcontact.php?id=3" id="viewcontact" class="cboxElement">View Details</a>

当数据来自 ajax 并且我单击 o 时，查看详细信息颜色框无法正常打开，但是当我在没有 ajax 的情况下放置此链接时，它可以正常工作

【问题讨论】：

标签： jquery ajax colorbox

【解决方案1】：

ajax 数据很可能是在 .colorbox() 事件处理程序被附加后加载的。完成 ajax 调用后，您需要将颜色框事件处理程序应用到已加载的新元素。

完成后可以调用.colorbox()方法，或者查看.live()或.delegate()方法。

【讨论】：

【解决方案2】：

试试这个：

<script>
    $.ajax({
      url: "remote.php?act=ShowContacts&id="+id,
      cache: false,
      success: function(response){
        $("#displaycontacts").html(response);
      }
    });
    $("body").delegate("a[rel='lightbox']", "click", function (event) {
                        event.preventDefault();
                        $.colorbox({href: $(this).attr("href"),
                               width:"500px",
                               height:"520px",
                               iframe:true});
    });
</script>
<a href="viewcontact.php?id=3" rel='lightbox'>View Details</a>

【讨论】：