2011-06-07 82 views
2

我正在調用兩個函數一個Java腳本和一個Jquery函數,點擊Cancel按鈕。
Java腳本函數在Jquery函數之前得到執行,我想完全相反。
這裏是我的HTML代碼如何決定執行順序爲Javascript和Jquery函數

<button type="button" class="noWarning" id="cancelButton" 
    onclick="javascript: showMessage('cancelButton', 'Cancelling...'); disableButtons(); submitForm('${cancelDataRequestFormUrl}');"> 
    Cancel</button> 

jQuery函數

$(".noWarning").click(function() 
    { 
     needToConfirm = false; 
     alert("NeedToConfirm : " + needToConfirm); 
    }); 

showMessage('cancelButton', 'Cancelling...');得到$(".noWarning").click(function())之前,我怎麼能更改執行順序執行?
編輯:
我試圖用相同的另一個按鈕

<button type="button" class="noWarning" id="saveButton" 
    onclick="javascript: submitDataRequest('saveButton', 'Saving...', 'newDataRequestForm', '${saveDataRequestFormUrl}', '${successSaveDataRequestFormUrl}');"> 
    Save as Draft</button>  

而之前onClick功能及其工作正常Jquery函數獲取調用。
這會增加混淆。

〜Ajinkya。

回答

3

在JavaScript中,回調和事件處理程序應該按照它們綁定的順序執行,並且無法更改該順序。 onclick屬性中的代碼將在創建元素後直接綁定,因此將首先被執行。

防止這種情況的唯一方法是通過使用jQuery的.removeAttr來刪除源或客戶端的屬性,如test case所示。

然後,您可以綁定使用jQuery回調的順序,你希望他們執行:

$(".noWarning").click(function(){ 
    needToConfirm = false; 
    alert("NeedToConfirm : " + needToConfirm); 
}); 

$("#cancelButton").click(function(){ 
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}'); 
}); 

請注意:onclick屬性的使用被認爲是屬於早在上世紀90年代一個不好的做法和應該避免。如果可能的話,JavaScript應該從HTML中分離出來,最好放在一個單獨的文件中。

+0

@Marcus:問題是,我寫一個通用的腳本應該到處運行,我不應該(不能)更改原始代碼。有沒有其他的選擇? – xyz 2011-06-07 07:13:27

+0

@Ajinkya,可悲的是。只要DOM元素創建完成,「onclick」屬性中的代碼就會綁定到事件上,因此將首先執行。但是,您可以操作代碼客戶端並使用'.removeAttr(「onclick」)'刪除該屬性。 – mekwall 2011-06-07 07:19:51

+0

@Marcus Ekwall,我覺得'.onclick = null'也會起作用嗎? (不知道雖然!) – Domenic 2011-06-07 07:23:10

0

爲什麼不把showMessage函數放入jQuery函數中?

3
$(".noWarning").click(function() 
{ 
    needToConfirm = false; 
    alert("NeedToConfirm : " + needToConfirm); 
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}'); 
}); 

請記住,jQuery是一個基於javascript的庫。所以你可以在jQuery回調中使用JS。

如果你想.noWarning是一個單獨的回調(結合幾個元素)和#cancelButton有一個獨特的回調,你可以這樣做:

$(".noWarning").click(function() 
{ 
    needToConfirm = false; 
    alert("NeedToConfirm : " + needToConfirm); 
}); 

$("#cancelButton").click(function() 
{ 
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}'); 
}); 

正如你所看到的,你的訂單定義你的回調事宜。

+0

感謝您的建議,它幫助了很多:) – xyz 2011-06-07 09:41:59

1

執行順序取決於您將函數綁定到點擊事件的順序。 但爲了將一個函數綁定到按鈕的onclick事件上,該按鈕必須已經被定義。

在您的示例中,您正在定義按鈕並直接將showMessage函數綁定到它,通過說onclick = ...等。012b可能在代碼中更多的下來你綁定第二個函數。

要獲得對它的更多控制權,請將onclick函數全部以相同的方式綁定,或者通過在onclick屬性中定義它,或者稍後使用javascript來完成。

<button id="button1" onclick="function1();function2();">click me</button> 

或者通過做這樣

$("#button1").click(function2); 
$("#button1").click(function1);