0

ページのマウスリーブで非表示のトリガーで立ち上がるフォームポップアップを作成しました。そのようにして、入力された値の完全なチェックを実行し、次に ajax データを使用して、メールを送信するために php に送信しました。それまではすべて順調でした。ここで、index.html から html コンテンツを削除し、form.html などの外部ファイルから追加する必要があります。iframe を使用することにしたので、フォームをポップアップとして表示することはできましたが、フォームの送信または入力値のチェックは失敗しました。バージョンno2ではなく、古いfancyboxバージョンを使用しています。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