国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - jquery form表單submit()中的過程不執(zhí)行
PHP中文網(wǎng)
PHP中文網(wǎng) 2017-04-11 11:34:00
0
3
301

很奇葩的問題,代碼如下:

<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()方法,但是沒有執(zhí)行,于是寫成最簡單的方法,在中間寫了個alert(goUrl),再嘗試用console.log(goUrl)也沒有執(zhí)行,結(jié)果如圖上,調(diào)試的時候直接從200行跳到202行去了,中間的alert()被忽略了。

jquery是v1.8.0,實(shí)在搞不懂,求指導(dǎo)。

初充回答1:

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

如上,console.log($('#example'));可以獲得到對象,面板中有輸出,但是到了submit()這一行,還是直接跳出了。

補(bǔ)充回答2:

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

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

如上,3點(diǎn):
1.我以前是在subit()中使用了return false,經(jīng)測試與使用event.preventDefault()效果一樣,不知道有沒有別的什么區(qū)別?

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

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

測試很多遍,代碼只走到submit()在外層就直接跳出了,里面沒有執(zhí)行,不知道為什么。

我現(xiàn)在把$.ajax()寫到submit()外面來,反倒是可以的,想必還是什么地方有問題。

3.由于我用的是intpu type="button" + 事件提交,是不是本身并沒有調(diào)用到$('#example').submit()事件? 那么上面的submit()部分本來就是多此一舉?
.

PHP中文網(wǎng)
PHP中文網(wǎng)

認(rèn)證高級PHP講師

reply all(3)
Ty80

釐清一個觀念

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

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

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

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

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

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

2016-07-14 補(bǔ)充

因?yàn)槎嗔诵U多問題,所以一個一個回答:

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

這邊舉幾個例子:

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

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

// 還有更多方法

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

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

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

return false 這個比較複雜,當(dāng)你 return false 時,其效果等同於 event.preventDefault() + event.stopPropagation() + 跳出回調(diào)函數(shù) + 返回 false ,所以最好在清楚自己代碼思路的情況下慎用,不然容易產(chǎn)生難以 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() // 觸發(fā) child 的 click event ,等同於點(diǎn)擊 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({
        ...
    });
        
});

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

左手右手慢動作


先打印一下這個對象有沒有獲取到

巴扎黑

Form的action設(shè)置了嗎?201行是回調(diào)。


重新看了一遍問題
發(fā)現(xiàn)題主的代碼有誤

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

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

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

然后關(guān)于jQuery的sumbit方法,官方文檔在這里:https://api.jquery.com/submit/#submit

Handler參數(shù)是回掉用方法,submit執(zhí)行時,數(shù)據(jù)會被提交。


如果不對,還請指正。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template