ページのマウスリーブで非表示のトリガーで立ち上がるフォームポップアップを作成しました。そのようにして、入力された値の完全なチェックを実行し、次に 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() { ... });
}
});
});