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函数被调用这让人更加困惑。

~Ajinkya。

Answer 1

$(".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}');
});

如您所见，您定义回调的顺序很重要。

Answer 2

在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分开，如果可能，最好放在单独的文件中。

Answer 3

执行顺序由将函数绑定到on click事件的顺序决定。但是为了将函数绑定到按钮的onclick事件，必须已经定义了按钮。

在您的示例中，您正在定义按钮并直接将showMessage函数绑定到它，通过说onclick = ...等。可疑的是，在你的代码中你可以使用第二个函数绑定更多内容。

要获得对它的更多控制，请以相同的方式绑定您的onclick函数，方法是在onclick属性中定义它，或者稍后使用javascript执行它。

实施例

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

或者像这样做

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

Answer 4

为什么不把showMessage函数放入jQuery函数？

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

4 个答案: