如何在复选框更改发生之前执行功能？

Question

我在管理复选框输入事件侦听器的顺序时遇到困难。

例如，如果我有这些输入：

<input type='checkbox' class='multi' name='product' id='type1'>
<input type='checkbox' class='multi' name='product' id='type2'>
<input type='checkbox'               name='product' id='type3'>

我想在有人点击 class = .multi 的输入时监听，然后依次执行两个函数。

具体来说，我希望 function(a) 执行，在复选框状态更改被注册之前（即，在检查执行之前）。

现在，我的以下系统无法正常工作，因为 change 事件在对话框启动时触发。我似乎无法暂停 change 事件以等到：

$('.multi').on('mousedown', function(a){ // open a jqueryUi dialog box and wait to complete function(a)
//do function(a) ...
$('.dialog').dialog('close');

then, once the dialog is closed...

 $(input:checkbox).on('change', function(b){ //do function b only after function a has completed

Answer 1

也许这就是您要找的：（尚未测试，但这是我的想法）

$('.multi').on('click',function(e) {
    e.preventDefault();
    function(a); // your function
    $(this).trigger('click');
});

祝你好运^^

更新：

抱歉，上面的代码似乎会做无限递归，试试这个：

$('.multi').on('click',function(e) {
    e.preventDefault();
    function(a); // your function
    if ($(this).is(':checked')) {
        $(this).prop('checked',false);
    } else {
        $(this).prop('checked',true);
    }
});

Answer 2

我觉得你的流程应该是这样的：

复选框更改事件
打开对话框（模态）
对话框（打开回调）调用函数 a)
对话框（关闭回调）调用函数 b)

例如

定义对话框

 var dlgOptions={
     title:'My dialog',
     modal:true,
     buttons:{..},
     open:function(event, ui){
       //invoke function a
     },
     close:function(event, ui){
       //invoke function b
     }
    }

然后

$('.multi').on('change',function(e) {   
    $("#dlgSelector").dialog(dlgOptions)
});

Answer 3

这就是我要做的。

function functionB() {
    // Whatever you want to do here
}

// Initialise the dialog, specifying functionB as your callback function
// which will run automatically when the dialog closes.
$('.dialog').dialog({
    close: functionB
});

// Handle mousedown for any checkbox with 'multi' class
$('.multi').on('mousedown', function(a){
    // Do stuff...
    $('.dialog').dialog('close');
});

// Handle the 'change' event for any checkbox that DOESN'T have the 'multi' class
$(input:checkbox).not('.multi').on('change', functionB);

这样，当您使用 'multi' class 选中一个复选框时，它会执行它的操作，然后关闭对话框。然后，因为我们告诉对话框在关闭时调用 functionB，所以 functionB 将执行。

另一个没有 'multi' class 的复选框仍然可以在 'change' 事件中独立调用函数 B。

如何在复选框更改发生之前执行功能？

How can I execute a function before checkbox change takes place?

javascript

checkbox

jquery

mouseevent

更新：