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

Question

I'm having difficulty managing the order of event listeners on a checkbox input.

For example, if I have these inputs:

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

I want to listen for whenever someone clicks an input with class = .multi , then execute two functions in sequence.

Specifically, I want function(a) to execute, before the change in checkbox status is registered (ie, before the check executes).

Right now, I have the following system that doesn't work, because the change event fires while the dialog box has been launched. I can't seem to pause the change event to wait until :

$('.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

Maybe this is what you looking for: (haven't tested it yet but this is what's on my head)

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

Good luck ^^

Update:

Sorry, it seems the above code will do infinite recursion, try this:

$('.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

I think you flow should be something like this:

1. checkbox change event
2. Open dialog box (modal)
3. dialog (open callback ) invoke function a)
4. dialog (close callback) invoke function b)

eg

Define dialog

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

Then

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

Answer 3

This is what I would do.

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

This way when you check a checkbox with the 'multi' class, it does its thing, then closes the dialog. Then, because we told the dialog to call functionB whenever it closes, functionB will execute.

And the other checkbox WITHOUT a 'multi' class can still call functionB independently on a 'change' event.