Question

我提交表单有问题。点击按钮警告框后不会出现。看起来event.preventDefault()阻止了提交。但我需要preventDefault来防止在jQuery加载后重新加载页面。任何想法如何解决它。

$(document).ready(function(){

    new_submit();

    initOnClickMainMenu();//there is problem

});

function initOnClickMainMenu(){

    $("#menu_register").click(function(event){
        event.preventDefault();
        addToContent("#main_content","register.html",function(){
            hideShowAlertBox("#register_alert","hide","");
        });
    this.blur();
    });

    $("#menu_login").click(function(event){
        event.preventDefault();
        addToContent("#main_content","login.html",function(){
            hideShowAlertBox("#login_alert","hide","");
        });
        this.blur(); 
    });
}

function addToContent(content,htmlFile,callback){
    //need to prevent realoading page
    $(content).load(htmlFile,callback);
}

function new_submit(){
    $("form").submit(function (event) {
        alert("DONE");
    });
}

index.html中的菜单部分

<div>
<ul class="nav navbar-nav">
<li><a id="menu_register" href=""><span class="glyphicon glyphicon-new-window"></span> Register</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="menu_login" href=""><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</div>

和login.html表单（注册相同）

<form class="form-field" action="" role="form" method="post" name="login">
<div id="login_alert" class="alert alert-danger" role="alert"></div>

<div class="form-group">
<label class="control-label">Nickname:</label>
<input name="nickname" class="form-control" type="text" placeholder="Your nickname">
</div>
<div class="form-group">
<label class="control-label">Password:</label>
<input name="password" class="form-control" type="password" placeholder="Your password">
</div>
<button class="btn btn-success" type="submit" name="login">Login</button>
</form>

FIX 谷歌搜索后，我发现加载的DOM没有事件监听器，所以我在加载后添加它，现在它可以工作。

addToContent("#main_content","register.html",function(event){
            hideShowAlertBox("#register_alert","hide","");
            new_submit();
        });

Answer 1

使用jQuery new_submit方法而不是jquery on方法更新submit方法。

function new_submit(){
  $('form').on('submit', function() {
    alert('You submitted the form!');
  });
}

Answer 2

有两种方法可以做到这一点。添加return false;以停止重定向问题或将其添加到表单'submit'事件。

返回false示例

function new_submit(){
    $("form").submit(function (event) {
        alert("DONE");
        return false;
    });
}

表单'提交'事件。

function new_submit(){
  $('form').on('submit', function() {
    alert('You submitted the form!');
  });
}

jquery提交不起作用

2 个答案: