javascript - jquery form表单submit()中的过程不执行
PHP中文网
PHP中文网 2017-04-11 11:34:00
[JavaScript讨论组]

很奇葩的问题,代码如下:

再上个图:

本来在submit()之间写了$.ajax()方法,但是没有执行,于是写成最简单的方法,在中间写了个alert(goUrl),再尝试用console.log(goUrl)也没有执行,结果如图上,调试的时候直接从200行跳到202行去了,中间的alert()被忽略了。

jquery是v1.8.0,实在搞不懂,求指导。

初充回答1:

    console.log($('#example'));
    $('#example').submit(function(){
        alert(goUrl);
    });

如上,console.log($('#example'));可以获得到对象,面板中有输出,但是到了submit()这一行,还是直接跳出了。

补充回答2:


如上,3点:
1.我以前是在subit()中使用了return false,经测试与使用event.preventDefault()效果一样,不知道有没有别的什么区别?

2.我一直是在submit()中使用$.ajax(),如下:

$('#example').submit( function(event) {
    event.preventDefault()
    
    $.ajax({
        // 你的代碼
    })
})

测试很多遍,代码只走到submit()在外层就直接跳出了,里面没有执行,不知道为什么。

我现在把$.ajax()写到submit()外面来,反倒是可以的,想必还是什么地方有问题。

3.由于我用的是intpu type="button" + 事件提交,是不是本身并没有调用到$('#example').submit()事件? 那么上面的submit()部分本来就是多此一举?
.

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHP中文网

釐清一個觀念

$('...').submit(handler) 有參數,是監聽 submit 事件,不是送出表單

$('...').submit() 沒有任何參數,才是觸發 submit 送出表單

$('...').submit( function(event) {
    // 當你觸發 submit 例如,按下 submit 按鈕,才會觸發這個事件
})

如果你是想在表單送出時,阻擋原本事件並轉為用 ajax 送出

$('#example').submit( function(event) {
    event.preventDefault()
    
    $.ajax({
        // 你的代碼
    })
})

$('#doEdit').click( function() {
    $('#example').submit()
})

2016-07-14 補充

因為多了蠻多問題,所以一個一個回答:

首先,$('#form').submit(function(event){ ... }) 綁定的事件監聽,是監聽 submit 這個 event ,所以不管觸發方式如何,都會執行這邊設定的 callback

這邊舉幾個例子:

<input type="submit" value="送出">

$('#form').submit()
$('#form').trigger('submit')

// 還有更多方法

還有關於 event.preventDefault()return false 的差別:

event.preventDefault() 是阻止事件預設的瀏覽器事件繼續執行,何謂瀏覽器事件,就像是點擊 <a href="..."> 網頁會跳轉,點擊 submit 提交表單也會跳轉,等等預設的事件,但並不是所有元素的操作都會引起瀏覽器事件。

event.stopPropagation() 是阻止事件冒泡,所謂的事件冒泡是當一個元素的事件被觸發時,其會沿著父元素一路往上觸發(父元素也有設置事件監聽時),下面寫了個小例子可以按按看: jsFiddle

return false 這個比較複雜,當你 return false 時,其效果等同於 event.preventDefault() + event.stopPropagation() + 跳出回調函數 + 返回 false ,所以最好在清楚自己代碼思路的情況下慎用,不然容易產生難以 debug 的錯誤

<p id="parent">
   <p id="child"></p>
</p>

var parent = document.getElementById('parent'),
    child  = document.getElementById('child')
    
    parent.addEventListener('click', function() {
        console.log('parent click event triggered')
    })
    
    child.addEventListener('click', function() {
        console.log('child click event triggered')
    })
    
    child.click() // 觸發 child 的 click event ,等同於點擊 child
    
    // => child click event triggered
    // => parent click event triggered
    

至於你寫的這段代碼:

function sub(text){
    $(document).ready(function(){

            $('#example').submit(function(e){
                //e.preventDefault();
                return false;
            });
                
            editor1.sync();    

            var goUrl = 'test.php';
            
            $.ajax({
                ...
            });
            
    });
}

這邊包在 sub 中不太對:

function sub(text){

}

$(document).ready(function(){
    
    
    $('#example').submit(function(e){
        //e.preventDefault();
        return false;
    });
        
    editor1.sync();    

    var goUrl = 'test.php';
    
    $.ajax({
        ...
    });
        
});

這邊不太懂你想要做的是什麼,可以詳細敘述下

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号