unwanted asynchronous event dispatching

Question

I code a 'attributes setting' window with jqxWidgets (slider, color control) in order to set visual object attributes (color, border width, etc.) On each jqxWidget, I declare a function in order to detect change and to apply this change on visual object. So, when object is selected with mouse, I disable the callback :

$('#width').on('change', undefined);

Then I force the jqxWidget to object value :

$('#width').jqxSlider('setValue', object.width);

Then I enabled event trigger :

$('#width').on('change', the_width_on_change_callback);

But It seems that asynchronous mechanism does enable the event trigger before the value is forced, so the the_width_on_change_callback function is called. Using global flag in order to filter doesn't work; How to solve this ? Best regards.

Answer 1

I have tried this solution which works well:

// on selection
$('#node_label')[0].classList.remove('enabled');
// force widget value
$('#node_label').jqxInput('val', node.label );
// enable event processing
$('#node_label')[0].classList.add('enabled');

and in call back function :

$('#node_label').on('change', this.on_change_node_label);

...

this.on_change_node_label = function (event) {
    event.stopPropagation();
    event.preventDefault();
    if ( ! this.classList.contains('enabled')) return;
    var value = $('#node_label').val();
    }