javascript - 如何确定 Javascript 和 Jquery 函数的执行顺序

Question

我在单击Cancel 按钮时调用了两个函数，一个是 Java 脚本，另一个是 Jquery 函数。
Java 脚本函数在 Jquery 函数之前执行，我想要恰恰相反。
这是我的 HTML 代码

<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>    

并且其工作正常的 Jquery 函数在 onClick 函数之前被调用。
这让人更加困惑。

Answer 1

在 JavaScript 中，回调和事件处理程序应该按照它们被绑定(bind)的顺序执行，并且没有办法改变这个顺序。 onclick 属性中的代码将在元素创建后直接绑定(bind)，因此将最先执行。

防止这种情况的唯一方法是使用 jQuery 的 .removeAttr 在源代码或客户端中删除该属性。 , 如本 test case 所示.

然后您可以按照您希望的执行顺序将回调与 jQuery 绑定(bind):

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

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

请注意，onclick 属性的使用在 90 年代被认为是一种不好的做法，应该避免。 JavaScript 应该与 HTML 分开，如果可能最好放在一个单独的文件中。