0

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

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

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

但是，当 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 功能？

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

4

1 回答 1

0

这是答案：

<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 访问之前都会被加载。

于 2013-01-04T22:48:47.187 回答