Событие mouseup не запускается с кодом внутри функции

Я пытаюсь создать кнопку подтверждения «Нажмите и удерживайте» с помощью jQuery. Проблема в том, что событие mouseup не запускается, когда я вставляю код в эту функцию. Он срабатывает только тогда, когда функция пуста и есть только console.log. Вот пример:

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    self.addClass('-loading -progress');
    clickDuration = setTimeout(function(e) {
        self.trigger('click').removeClass('-progress');
        console.log('clicked for 2 seconds');
    }, parseInt(confirmDuration));
    console.log(e);
}).on('mouseup touchend', function(e) {
    self.removeClass('-loading -progress');
    clearTimeout(clickDuration);
    console.log(e);
});

mouseup не срабатывает.

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    console.log(e);
}).on('mouseup touchend', function(e) {
    console.log(e);
});

mouseup будет стрелять.

В любом случае я создал полный пример своего кода, и вы можете поиграть с ним прямо здесь: https://jsbin.com/bozusiboku/1/edit?js,output

Спасибо!