Vitaliy Jakim

Я предполагаю что у вас
var message = this.login.value;
этот кусок кода возвращает пустоту, потому что this в этом контексте это не DOM Document и он может ничего не вернуть, точнее не возвращает то что вы ожидаете.

Посмотрите вывод в консоли переменной this. в этом же примере

https://jsfiddle.net/JakimOFF/2om03hwd/1/

$(function() {
        $(document).on('click touchstart', '.selector', function(){ 
            console.log($(this));
        });
    });

Ребятки, добавляем такой кусок кода в js и ловим все события как на телефоне так и на ПК, кроссбраузерно кроссплатформенно.
Не ищите других способов, ибо кто пишет про .delegate() или .live() давно не читали доку jQuery.

Slick не поддерживает такие изощренные анимации, у него можно задать разное анимирование на сдвиг, ease-in ease-in-out и т.д.
Для того что бы делать индивидуальные эффекты можно отлавливать событие смены слайда

$('.you_tag_class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// здесь навешиваете разные анимации для своих элементов, группируете их по времени выполнения и в свою очередь делаете скорость анимации в слике с учетом всех ваших временных выполнений
    });

$('.one-time').slick({
  speed: 300  // скорость анимации будет зависить от времени анимирования всех ваших блоков
});

$('.images').slick({ // это изначально slick слайдер для основного блока изображений
        slidesToShow: 1,  // по одному слайдеру 
        slidesToScroll: 1, // по одному менять
        arrows:true, // включение стрелок (если не нужны false)
        asNavFor: '.imagesnew_dotted' // указываем что навигация для слайдера будет отдельно (указываем класс куда вешаем навигацию)
    });

    $('.imagesnew_dotted').slick({ // настройка навигации
        slidesToShow: 3, // указываем что нужно показывать 3 навигационных изображения
        asNavFor: '.images', // указываем что это навигация для блока выше
        focusOnSelect: true // указываем что бы слайделось по клику
    });

<!-- Собственно блок где будут основные изображения -->
            <div class="images">
                <div><img src="image/data/big_img_1.jpg" alt=""></div>
                <div><img src="image/data/big_img_2.jpg" alt=""></div>
                <div><img src="image/data/big_img_3.jpg" alt=""></div>
            </div>
<!-- Навигация для вышеупомянутого слайдера -->
            <div class="imagesnew_dotted" style="transform: none !important;"> // обязательно в css запретите трансформацию, а то будут иконки ездить в зависимости от номера слайда
                <img class="active" src="image/data/icon_img_1.jpg">
                <img src="image/data/icon_img_2jpg">
                <img src="image/data/icon_img_3.jpg">
            </div>

В Вашем случае необходимо использовать конструкцию, которая вызывается через .one

$('.menu__wrapper__menu').one('click', function() {

Вот ссылка на официальный источник, и на рассмотренный пример Надеюсь этот вариант решения сможет Вам в будущем помочь.