在MixItUp jQuery插件中应用过滤器后，如何在“ mixEnd”上调用函数？

Question

Desired Behaviour

I am wanting to call a custom function after mixItUp has finished performing its filter function.

MixItUp is evoked on selecting a value from a dropdown.

Current Behaviour

To demonstrate and test functionality I am calling alert() on mixEnd .

The number of times the alert box shows after selecting a value is incrementing on each subsequent selection, ie after the first selection it shows once, after the second selection it shows twice.

jQuery

//define function
function initFilters() {
    $('#container').mixItUp({
        layout: {
            display: 'block'
        },
        animation: {
            duration: 1000,
            effects: 'translateZ(-360px) stagger(110ms) fade',
            easing: 'ease'
        }
    });
}

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

    // do something on mixEnd
    $('#container').on('mixEnd', function(e, state){
        alert('MixItUp finished!');
    });

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/

Steps To Reproduce

• Visit jsFiddle.
• Select an area from the dropdown (one alert will show).
• Select another area from the dropdown (two alerts will show).

Question

There are a number of approaches to applying multiple functions and callbacks in MixItUp which are shown below.

My questions are therefore:

• How do I resolve the undesired behaviour of the alert box showing incrementally?

• Which of the following approaches is the most elegant way to achieve the desired behaviour (as I suspect my current approach is causing the problem)?

Options

multiMix ( https://mixitup.kunkalabs.com/docs/#method-multiMix )

Example:

$('#container').mixItUp('multiMix', {
    filter: '.category-1, .category-2',
    sort: 'name:asc',
    changeLayout: {
        containerClass: 'flex'
    }
});

callback with onMixEnd ( https://mixitup.kunkalabs.com/docs/#prop-callbacks-onMixEnd )

$('#container').mixItUp({
    callbacks: {
        onMixEnd: function(state){
            alert('Operation ended');
        }
    }
});

And there is also a example of this approach (which I am currently using):

$('#container').on('mixEnd', function(e, state){
    alert('MixItUp finished!');
});

Answer 1

Well here is one solution, still not sure if most elegant though, but it solves the undesired multiple triggering behaviour.

All I had to do was move the .on('mixEnd', function(e, state) out of the dropdown select area like so:

//define function
function initFilters() {
    $('#container').mixItUp({
    layout: {
        display: 'block'
    },
    animation: {
        duration: 1000,
        effects: 'translateZ(-360px) stagger(110ms) fade',
        easing: 'ease'
    }
    });
}

// do something on mixEnd <-- added here
$('#container').on('mixEnd', function(e, state){
alert('MixItUp finished!');
});

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

// <-- removed from here

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/8/