jquery form表单submit()中的过程不执行

Question

很奇葩的问题，代码如下：

<script type="text/javascript">
$(document).ready(function(){

    //提交
    function sub(btn){
        var goUrl = 'test.php';
        $('#example').submit(function(){
            alert(goUrl);
        });
    }

    //修改文章提交
    $('#doEdit').click(function(){
        sub(this);
    });
)};
</script>

再上个图：

本来在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:

<script type="text/javascript">
function sub(text){
    $(document).ready(function(){
            alert(text);
            //提交新文章/提交編輯    通過action區別
            $('#example').submit(function(e){

                //e.preventDefault();
                return false;
            });
                
                //同步edtor内容到textarea
                editor1.sync();    
    
                var goUrl = 'test.php';
                
                $.ajax({
                    ...
                });
            
    });
}
</script>
<input type="button" value="存儲文章" id="doEdit" onclick="sub('doEdit');" act="doEdit" style="width:80px; "/>

如上，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()部分本来就是多此一举?
.

Answer 1

釐清一個觀念

$('...').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 的錯誤

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

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({
        ...
    });
        
});

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

Answer 2

先打印一下这个对象有没有获取到

Answer 3

Form的action设置了吗？201行是回调。

---

重新看了一遍问题
发现题主的代码有误

$(document).ready(function(){
    //提交
    function sub(btn){
        var goUrl = 'test.php';
        $('#example').submit(function(){
            alert(goUrl);
        });
    }

    //修改文章提交
    $('#doEdit').click(function(){
        sub(this);
    });
});

最后的括号和分号漏掉了。

然后关于jQuery的sumbit方法，官方文档在这里：https://api.jquery.com/submit/#submit

Handler参数是回掉用方法，submit执行时，数据会被提交。

---

如果不对，还请指正。