很奇葩的問題,代碼如下:
<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()部分本來就是多此一舉?
.
認(rèn)證高級PHP講師
釐清一個觀念
$('...').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ù)會被提交。
如果不對,還請指正。