Question

我创建了一个表单弹出窗口，它在页面的mouseleave上带有隐藏触发器。这样我就可以对所输入的值进行全面检查，然后使用ajax数据进入php以发送电子邮件。直到那时一切都很好。现在我需要从index.html中删除html内容并从外部文件中添加它，例如名为form.html。我已经决定使用iframe，所以我设法使表单显示为弹出窗口，但表单提交或输入值检查现在失败。我使用旧的fancybox版本而不是版本no2。使用jQuery选择器等保存的所有控件，现在甚至按钮“提交”单击都无法识别。然后我想到on（）函数，所以我写了

$("#submit").on('click', function() { ... });

但没有同样的问题。有任何想法吗？也许我不必使用iframe但ajax加载内容然后on（）。我也试过了，但我遇到了弹出式内容形式无法正常显示的问题。

这是我迄今为止所取得的所有进展。

$(document).ready(function(){
'use strict';

//Bring form.html content with ajax into the page
$('body').append('<a id="trigger" href="#form_id"></a>');

//Check for mobile device, if jQuery.browser.mobile is false then we have a desktop or a laptop
if(!jQuery.browser.mobile)
{

    //Popup is triggered when mouseleave effect happens
    $(document).mouseleave(function() {

        'use strict';
        //Check if cookie popup already exists
        var popupCookie = COOKIE.getCookie('popup');

        //If it is then popup doesn't show
        if(!popupCookie)
        {//Popup appears but a popup cookie is set with duration set to 24 hours from now

            //Set expiration limit in 24 hours
            var expire = new Date();
            var time = expire.getTime();
            time += 24 * 3600 * 1000;//Exactly 24 hours from now
            expire.setTime(time);

            //Set a popup cookie
            COOKIE.setCookie('popup', 'popup', expire);

            $("#trigger").fancybox();
            //Triggers popup
            $("#trigger").trigger('click');

$.ajax({
  url: "form.html",
  success: function(data){
   $('body').append(data);
  }
});

            //Reset values
            $('input:text').val('');
            $('textarea').val('');
            $('#fancybox-content').css('background-color','#fff');          

            //Popup form function
            $("#trigger").fancybox({
                'scrolling'         : 'no',
                'hideOnOverlayClick': false,
                'onClosed'          : function() {
                                        $('input:text').val('');
                                        $('textarea').val('');
                                    },
                'autoDimensions'    : true,
                'padding'           : 5,
                'transitionIn'      : 'elastic',
                'onStart'           : function(){
                                        $('#fancybox-content').css('background-color','#fff');                  
                                    }
            }); 

    $("#submit").on('click', function() { ... });
   }
  });
});

Fancybox iframe表单操作 - 使用ajax

0 个答案: