jQuery — очищаем поле с результатом после каждого выполненного события

seasonvar append example 620x660 - jQuery — очищаем поле с результатом после каждого выполненного события

Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн кинотеатр сериалов. У них есть премиум и если тыкать на любой из трех пакетов выше, будет бесконечно выводиться ошибка (есть имеются проблемы).

Пример попроще описан ниже. Суть та же. Если тыкать на кнопку будут создаваться заготовленные ранее тексты и добавляться друг за другом.

Исправляется такое недоразумение очень легко, главное не забывать о нем.

jquery clear result 620x344 - jQuery — очищаем поле с результатом после каждого выполненного события

jQuery код решения выше

<!-- HTML CODE -->
<div class="container">
   <p class="button">НАЖАТЬ</p>

   <p class="result"></p>
</div>
задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом 
   $('.result').append('Нажато ' + n + ' раз<br>');

});

Как видно на примере выше, при каждом клике будет добавляться новая строка. Это неудобно, например, когда у нас форма обратной связи и идет проверка введенных результатов.

С подобным решением будут выводиться бесконечное количество результатов. Уберем дублирование.

jQuery код удаления дублей

jquery clear result 1 620x286 - jQuery — очищаем поле с результатом после каждого выполненного события
задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом предварительно очистив ее от всего содержимого
   $('.result').empty().append('Нажато ' + n + ' раз<br>');

});

Мы добавили все лишь один метод .empty() и полностью изменили логику работы скрипта

Похожие записи

JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...
Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью...
JQ — запретить копирование и вставку
На скриншоте пункт меню «вставить» активен, а в буфере обмена находится текст из поля ниже. Но силами JavaScript команды: «копировать»,...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий