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

Question

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

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

当JavaScript被移除时，表单以其原生的超文本标记语言格式提交并正确地显示在颜色框中(例如，仅使用普通的下拉框)。

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

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

Answer 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表单中每个下拉框的函数都集成到Colorbox onComplete: JavaScript ()中，因此每个表单元素在通过Colorbox访问之前都会被加载。