0

我创建了一个表单弹出窗口，它在页面的鼠标离开时带有隐藏的触发器。这样，我对输入的值进行了全面检查，然后使用 ajax 数据转到 php 以发送电子邮件。到那时一切都很好。现在我需要从 index.html 中删除 html 内容并从外部文件（例如 form.html）中添加它。我决定使用 iframe，所以我设法使表单显示为一个很好的弹出窗口，但表单提交或输入值检查现在失败。我使用的是旧的 fancybox 版本而不是 2 号版本。使用 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() { ... });
   }
  });
});
4

0 回答 0