Search code examples
javascriptjqueryjgrowlnouislider

NoUiSlider On Event firing multiple times

Im displaying notifications each time i change a value using a slider, the first change creates one notification but then after that it creates multiple notification instead of one. Any ideas how i can stop this? Thank you for any help i have included my code below.

Each time the slider is moved this event fires.

$("#single-slider").on({

        change: function () {
            $("#single-slider").Link('lower').to(Notification);
        }
    });

It is bound to my notification function which lets me pass values in and display a message as seen below.

function Notification(value, type) {
console.log(value);
var tFormat = value;
$.jGrowl(' Refresh rate for ' + type + ' changed to ' + tFormat, { life: 10000, header: '<i class="fa fa-comment-o fa-2x"></i>' });

}

However instead of creating one notification it is creating multiple notifications.

Solution

  • The code you posted is fine (http://jsfiddle.net/2py6oz04/). You are probably adding the listener more than once.

    Try using

    $('#single-slider').off("change");

    Before

    $("#single-slider").on({
    change: function () {
        $("#single-slider").Link('lower').to(Notification);
    }
});

    As seen here: http://jsfiddle.net/2py6oz04/1/ I add a listener, take it off and add it again. If you remove the off line, you get two alerts.

    Also, add a console.log() before the $("#single-slider").on to log how many times it's added. Ideally, you should fix the root problem and not just turn the existing listener off.