Блог

Мне нужна ваша помощь. В настоящее время я работаю с модальной библиотекой в JavaScript для отображения модальной библиотеки для моих клиентов:

https://github.com/vodkabears/Remodal/tree/1.1.1

К сожалению, моя обработка событий в случае, если пользователь нажимает кнопку, работает не так, как ожидалось. Когда вы заглядываете в руководство, вы можете увидеть под точечными событиями следующий обработчик событий:

 $(document).on('cancellation', '.remodal', function () {
  console.log('Cancel button is clicked');
});
  

Этот get запускается, например, при нажатии кнопки отмены get. Поскольку я использую одно всплывающее окно для нескольких задач, мне нужно напрямую присоединить обработчик событий к вызову. Итак, сначала я написал функцию, которая открывает всплывающее окно:

 function openRemodal( remodalId ) {
    let remodal = $( `[data-remodal-id=${remodalId}]` );

    remodal.remodal().open();

    return remodal; // <- added to handle events
}
  

Я могу вызвать эту функцию таким образом:

 openRemodal( 'information-remodal' ); 
  

Чтобы выполнить обработку события, я вернул remodal в функцию и переписал свой вызов:

 openRemodal( 'information-remodal' ).on( 'cancellation', function () {
    alert( 'Test' );
} );
  

Кажется, это работает, но почему-то, когда я повторяю открытие всплывающего окна и нажимаю кнопку, при любом новом открытии отображается оповещение get, увеличенное в несколько раз.

Я не уверен, почему это происходит и почему. Можете ли вы, пожалуйста, помочь мне заставить это работать? Я просто хочу вызвать любую функцию там один раз — в любое время.

У jQuery есть .one метод … попробуйте использовать это вместо .on . Обратный вызов должен выполняться только один раз. https://api.jquery.com/one /

Каждый раз, когда вы открываете модель, вы привязываете функцию к событию отмены. поэтому добавьте новую функцию, и вы никогда не удалите ее. после первого раза у вас есть один, затем у вас есть два … и т.д.

просто прикрепите его один раз или удалите после обработки события.

 const modal = openRemodal( 'information-remodal' )
const handler = () => {
    alert( 'Test' );
    modal.off('cancellation', handler);
}

modal.on( 'cancellation', handler);