我的 jQuery .load 是否被 CMS 阻止了？答案

【问题标题】：Is my jQuery .load bloacked by the CMS?我的 jQuery .load 是否被 CMS 阻止了？
【发布时间】：2015-02-04 21:39:31
【问题描述】：

我在 Movable Type CMS 页面中使用 prettyPhoto。为了使它工作，我必须使用

<p>
    <mt:setvarblock name="html_head" append="1">
        JS scripts here
    </mt:include>
</p>

部分。要制作一个包含 30-40 张图片的画廊，我必须为每张看起来像这样的图片添加一个块：

<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
    <img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>

我想使用 (python) 脚本从 csv 文件生成这些条目，并将其放入 Web 服务器上的单独文件中。然后我使用这段代码将这些条目加载到页面中：

<div id="divTestArea1"></div>
<script type="text/javascript">
    $(function() {
        $("#divTestArea1").load("output_en.txt");
    });
</script>

当我加载页面时会显示缩略图，但是当我单击它们时会加载 pathtoimage.jpg 而不是 prettyphoto。

我的问题：我做错了什么还是出于安全原因可移动字体阻止了执行？如何调试这个？我有萤火虫，但不知道要寻找什么。

P.S：将条目直接粘贴到页面时，它会按预期工作。

编辑：完整的工作代码

<p>
    <mt:setvarblock name="html_head" append="1">
        <script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </mt:setvarblock> 
    <mt:include name="include/header.tmpl"> 
        <div id="divTestArea1"></div>
        <script type="text/javascript">
            $(function() {
                <!--$("#divTestArea1").load("../gallery/output_en.txt");-->
                $("#divTestArea1").load("../gallery/output_en.txt", function() {
                    $("a[rel^='prettyPhoto']").prettyPhoto();
                });
            });
        </script>

        <script type="text/javascript" charset="utf-8">// <![CDATA[
            $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
            });
        // ]]></script>
    </mt:include>
</p>

【问题讨论】：

控制台有错误吗？
我在 query.textresizer.js 上只得到了 404，因为它不在网络服务器上，而 TypeError: jQuery(...).textresizer is not a function。

标签： javascript jquery movabletype

【解决方案1】：

尝试在 AJAX 完成加载后包含 prettyPhoto() 调用，因为在页面加载时执行插件的那一刻，之前它所针对的元素在 DOM 中可用。

 <script type="text/javascript">
   $(function() {
     $("#divTestArea1").load("../gallery/output_en.txt", function() {
         $("a[rel^='prettyPhoto']").prettyPhoto();
     });
   });
</script>

【讨论】：