表单在 Colorbox 中显示时没有 Javascript 功能答案

【问题标题】：Form Has No Javascript Functionality When Displayed In Colorbox表单在 Colorbox 中显示时没有 Javascript 功能
【发布时间】：2013-01-03 05:06:37
【问题描述】：

我有一个带有下拉分层字段的表单，其功能源自一个名为 mcDropdown jQuery Plug-in 的 JavaScript 插件。

实际表单位于辅助页面 (Test.php) 上，并设置为通过 Colorbox 弹出窗口显示在主页上，提交表单时结果也会显示在 Colorbox 中。

当 JavaScript 被移除（即仅使用普通下拉框）时，表单会以其原生 HTML 格式正确提交并显示在 Colorbox 中。

但是，当 Javascript 以允许字段的层次下拉结构的形式实现时，通过 Colorbox 呈现时没有 JS 功能。

由于表单所在的实际页面 (Test.php) 本身可以使用 Javascript 正常工作，因此通过 Colorbox 呈现 JS 似乎存在一些问题。

我的研究表明，这可能是由于在元素加载到文档之前尝试访问它。

Colorbox 网站声明这可以通过将 JavaScript 移动到 ColorBox 的 onComplete 回调中来解决；但是，即使给出了示例，我也无法弄清楚如何正确执行此操作，因为我是 JS 的新手。

这是二级页面上的下拉脚本，它具有表单并与外部插件相关联（请注意，此表单中有三个字段使用此 JS 分层配置）：

<script type="text/javascript">             

         $(document).ready(function (){
            $("#category").mcDropdown("#categorymenu",
                {
                targetColumnSize: 3,
                }
            );
            $("#category1").mcDropdown("#categorymenu1",
                {
                targetColumnSize: 3,
                }
            );
        $("#category2").mcDropdown("#categorymenu2",
                {
                targetColumnSize: 3,
                }
            );

             });


</script>

这是在 Colorbox 窗口中打开辅助页面的主页上的 Colorbox 脚本：

<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->

  jQuery(function(){

   jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
    link_content_submit();
  }});
   });
function link_content_submit()
{
  jQuery("#pre-process").submit(function(){
    jQuery.post(
      jQuery(this).attr('action'),
      jQuery(this).serialize(),
      function(data){
        jQuery().colorbox({html: data, onComplete: function(){
          link_content_submit();
        }});
      }
    );
    return false;
  });

  }
</script>

三个外部文件分别是：jquery.mcdropdown.js、jquery-1.2.6.min.js 和 jquery.bgiframe.js。

如何修改主页上的这个 Colorbox 脚本，以便在通过 Colorbox 显示时保留表单的 JS 功能？

提前感谢您为这位初学者提供任何详细的答案。

【问题讨论】：

jquery 一分二？您可能需要考虑放弃 mcdropdown 以支持实际维护...

标签： javascript jquery colorbox

【解决方案1】：

答案如下：

<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->

  jQuery(function(){

   jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
    link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
  }});
   });
function link_content_submit()
{
  jQuery("#pre-process").submit(function(){
    jQuery.post(
      jQuery(this).attr('action'),
      jQuery(this).serialize(),
      function(data){
        jQuery().colorbox({html: data, onComplete: function(){
          link_content_submit();
        }});
      }
    );
    return false;
  });

  }
</script>

JS 表单中每个下拉框的相应 JavaScript 函数都集成到 Colorbox onComplete:function() 中，因此这些表单元素中的每一个在通过 Colorbox 访问之前都会被加载。

【讨论】：