很奇葩的问题,代码如下:
<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()部分本来就是多此一举?
.
釐清一個觀念
$('...').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({
...
});
});
這邊不太懂你想要做的是什麼,可以詳細敘述下
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执行时,数据会被提交。
如果不对,还请指正。
先打印一下这个对象有没有获取到