Question

我在javascript弹出窗口上遇到了一些问题当我单击输入表单中的一个文本字段然后提交弹出窗口然后返回主页面（输入表单）以继续处理而不刷新它时，我需要打开弹出窗口。

我使用了相同的实现方法和jquery这样的 - ＆gt; HTML 5 and CSS jQuery Log-in and Registration Popup Box - Adam Bray

但是后来我没有回到父页面而没有刷新。单击提交按钮时，它会不断重新加载。我已经阅读了许多与此相关的问题，例如 - ＆gt; php ajax form submit without refresh parent page 这个 - ＆gt; javascript popup reloads parent page -但仍然无法接近我想要的代码

我已经尝试使用preventDefault();和return false;，隐藏jquery，或者将“提交”类型按钮更改为“按钮”...但没有运气，弹出窗口甚至不会关闭了。

这是我使用的javascript

<script> 
$(document).ready(function() {
$("#loginLink").click(function( event ){
    event.preventDefault();
    $(".overlay").fadeToggle("fast");
});

$(".overlayLink").click(function(event){
    event.preventDefault();
    var action = $(this).attr('data-action');

    $.get( "ajax/" + action, function( data ) {
        $( ".login-content" ).html( data );
    }); 

    $(".overlay").fadeToggle("fast");
});

$(".close").click(function(){
    $(".overlay").fadeToggle("fast");
});

$(document).keyup(function(e) {
    if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) { 
        event.preventDefault();
        $(".overlay").fadeToggle("fast");
    }
});

}）;

弹出按钮的关闭功能 - ＆gt;

<script>
function closeSelf(){
window.close();
event.preventDefault();
}

这是弹出窗口上的按钮 - ＆gt;

<button type="button" onclick="closeSelf(); return false;">DONE</button>

我已经挣扎了几天，任何建议都会受到赞赏^ _ ^

哦，我想知道，为什么本机验证不会在这个弹出窗口上工作？虽然实际上它适用于父级

Answer 1

问题出在“.overlayLink”点击处理程序

中

$(".overlayLink").click(function(event){
    event.preventDefault();
    ...
});

这种处理程序以这种方式附加，不拦截表单提交，因此不能禁止它。

要拦截表单提交，您需要在表单的'onsumbmit'事件中附加处理程序，如下所示：

$("#myForm").on('submit', function(event) {
    event.preventDefault();
    ...
});

Javascript - 提交弹出窗口，无需在HTML5中重新加载父页面

1 个答案: