1

Столкнулся с проблемой, append первый раз создает нормальный div после выполнения функции, но все последующие по нажатию на кнопку "Send" - он создает два дива, по нажатию на третий раз на кнопку отправки - он создает 3 дива. И так далее по последующих отправках текста. В чем моя проблема?

Задача состояла в одиночном создании Div по нажатию на button. Сейчас при каждом клике создается вот такое вот поле. String 1 - 1 клик , String 2 - 2 клик и так далее.

введите сюда описание изображения

$('#textbox').click(function(event) {
  if (event.which = 13) {
    if ($('#enter').prop("checked")) {
      $('#textbox').val('');
      event.preventDefault();
    }
  }
  $('#send').click(function() {
    var userMessage = $('#textbox').val();
    $('#textbox').val('');
    createDiv = '<div class="user-message">' + userMessage + '</div>';
    $('#user-message').append(createDiv);
  });

});

4
  • 1
    вынеси навешивание обработчика клика на #send из обработчика клика #textbox
    – Grundy
    1 апр 2018 в 19:43
  • @Grundy можно по-подробнее? 1 апр 2018 в 19:48
  • 1
    Каждый раз когда ты кликаешь на #textbox у тебя добавляется обработчик к #send, то есть два раза кликнул на #textbox - на #send будет два обработчика, следовательно при клике на #send функция выполнится дважды и т.д.
    – Grundy
    1 апр 2018 в 19:50
  • @Grundy Да, все верно, запили ответ с кодом я приму, спасибо) 1 апр 2018 в 19:58

1 ответ 1

2

Навешивание обработчика клика на #send находится внутри обработчика клика #textbox, поэтому каждый раз, когда ты кликаешь на #textbox у тебя добавляется обработчик к #send, то есть два раза кликнул на #textbox - на #send будет два обработчика, следовательно при клике на #send функция выполнится дважды и т.д.

Для решения нужно вынести навешивание обработчика клика для #send

$('#textbox').click(function(event) {
  if (event.which = 13) {
    if ($('#enter').prop("checked")) {
      $('#textbox').val('');
      event.preventDefault();
    }
  }
});
$('#send').click(function() {
  var userMessage = $('#textbox').val();
  $('#textbox').val('');
  createDiv = '<div class="user-message">' + userMessage + '</div>';
  $('#user-message').append(createDiv);
});
1
  • Спасибо огромное за помощь, разобрался. 1 апр 2018 в 20:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.