jQuery 动态创建的内容答案

【问题标题】：jQuery dynamic created contentjQuery 动态创建的内容
【发布时间】：2014-07-29 20:54:46
【问题描述】：

当我遇到这种情况时，我总是遇到错误或卡住，我正在使用 ajax 从数据库中获取图像，我想在花式框中显示它们，在页眉中，我添加了所需脚本的所有链接，然后我在我的 div 里面写了：

htlmcon += '  <a rel="example_group" href="data:image/png;base64,' + $(this).find("ImageData").text() + '" title="Lorem ipsum dolor sit amet"><img alt="" src="data:image/png;base64,' + $(this).find("ImageData").text() + '" /></a>';

正如fancy box文件中提到的，我必须准备好以下文件：

$("a.group").fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    'overlayShow'   :   false
});

加载页面并获取图像后显示错误（Uncaught TypeError: Object [object Object] has no method 'fancybox'）

所以我已经从准备好的文档中删除了fancybox功能并将其添加到

$.ready.promise().done(function(){

但仍然无法正常工作，我也尝试在获取图像后直接调用它，仍然出现相同的错误 Uncaught TypeError: Object [object Object] has no method 'fancybox'

请指导我如何拨打电话以及在哪里拨打电话。

请注意，我已经在正常页面中尝试过，而不是在它正在工作的动态内容上。

问候....

编辑：我已将此功能添加到准备好的文档中：

  $(document).ready(function () {
          $("#imglist").on("focusin", function () {
              //    /*
              //    *   Examples - images
              //    */


              $("a[rel=example_group]").fancybox({
                  'transitionIn': 'none',
                  'transitionOut': 'none',
                  'titlePosition': 'over',
                  'titlePosition': 'outside',
                  'overlayColor': '#000',
                  'overlayOpacity': 0.9,
                  'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                      return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                  }
              });
          });
});

所以 Uncaught TypeError 消失了，但是 fancybox 没有工作，但我在想它可能没有进入 $("#imglist").on("focusin", function () { ....

另外，这些是我的参考资料：

<script src="code.jquery.com/jquery-1.9.1.js"></script>;
<script src="code.jquery.com/jquery-migrate-1.1.0.js"></script>; 
<script src="JS/jquery.mobile-1.3.2.min.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

【问题讨论】：

这个错误意味着你在调用fancybox()方法之前没有加载fancybox插件。请不要使用这种语法：$.ready.promise().done(function(){...})
how to bind fancybox to dynamic added element?的可能重复
答案stackoverflow.com/a/9084293/1055987 包括演示。检查源代码并与您的进行比较。还要确保您对所有 js 和 css 文件的引用都是正确的（查看源代码并单击每个链接的文件以确保您没有 404 错误）
我从我的参考资料中确定，我也在使用 chrome 控制台进行跟踪。

标签： jquery fancybox

【解决方案1】：

看起来你还没有加载fancybox。

您可以包含以下内容以将其包含在您的网页中。（以下从 CDN 加载）

<script src="cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js" type="text/javascript"></script>

【讨论】：