Question

我有一个带有下拉层次结构字段的表单，其中的功能派生自一个名为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功能？

提前感谢您对此初学者的任何详细解答。

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表单中每个下拉框的相应JavaScript函数都集成到Colorbox onComplete：function（）中，因此在通过Colorbox访问它们之前，每个表单元素都会被加载。

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

1 个答案: