kiskiskit
@kiskiskit
Жадно изучаю каждый пиксель

Почему не работает событие по button?

Делаю чат. В сообщение есть кнопка, которая должна отправлять следующее сообщение, но почему-то эта кнопка не работает.

Подскажите, пожалуйста, в чём заключается проблема и как можно её решить?

https://codepen.io/kiskiskit/pen/ExXGbOJ
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
veryoriginalnickname
@veryoriginalnickname
походу js вешает событие на элемент, которого (пока) не существует.
это я проверил так:
const ddd = document.querySelector('.message-submit')
console.log(ddd) // null

Не знаю насколько элегантное решение, но если прописать хотя бы так, то событие будет обрабатываться (именно событие нажатия, next все равно не покажет сообщение из-за if ($.trim(msg) == '') в insertMessage()):
function fakeMessage() {
  if ($('.messages-content').val() != '') {
    return false;
  }
  $('<div class="message loading new"><figure class="avatar"><img src="https://botogram.io/img/logo.png" /></figure><span></span></div>').appendTo($('.mCSB_container'));
  updateScrollbar();

  setTimeout(function() {
    $('.message.loading').remove();
    $('<div class="message new"><figure class="avatar"><img src="https://botogram.io/img/logo.png" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new');
    setDate();
    updateScrollbar();
    setted();
    i++;
  }, 1000 + (Math.random() * 20) * 100);

}
function setted(){
  $('.message-submit').click(function() {
  console.log("eeeee")
  insertMessage();
});
}


полный код

var $messages = $('.messages-content'),
    d, h, m,
    i = 0;

$(window).load(function() {
  $messages.mCustomScrollbar();
  setTimeout(function() {
    fakeMessage();
  }, 100);
});

function updateScrollbar() {
  $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
    scrollInertia: 10,
    timeout: 0
  });
}

function setDate(){
  d = new Date()
  if (m != d.getMinutes()) {
    m = d.getMinutes();
    $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
  }
}

function insertMessage() {
  msg = $('.messages-content').val();
  console.log(msg)
  if ($.trim(msg) == '') {
    console.log('no-trim')
    return false;
  }
  $('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
  setDate();
  $('.messages-content').val(null);
  updateScrollbar();
  setTimeout(function() {
    fakeMessage();
  }, 1000 + (Math.random() * 20) * 100);
}

$(window).on('keydown', function(e) {
  if (e.which == 13) {
    
    return false;
  }
})

var Fake = [
  'Первый этап <button type="submit" class="message-submit">next</button>',
  'Второй этап <button type="submit" class="message-submit">next</button>',
  'Третий этап <button type="submit" class="message-submit">next</button>',
  '4 этап <button type="submit" class="message-submit">next</button>',
 '5 этап конец'
]

function fakeMessage() {
  if ($('.messages-content').val() != '') {
    return false;
  }
  $('<div class="message loading new"><figure class="avatar"><img src="https://botogram.io/img/logo.png" /></figure><span></span></div>').appendTo($('.mCSB_container'));
  updateScrollbar();

  setTimeout(function() {
    $('.message.loading').remove();
    $('<div class="message new"><figure class="avatar"><img src="https://botogram.io/img/logo.png" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new');
    setDate();
    updateScrollbar();
    setted();
    i++;
  }, 1000 + (Math.random() * 20) * 100);

}

function setted(){
  $('.message-submit').click(function() {
  console.log("eeeee")
  insertMessage();
});
}



upd: если еще и убрать проверку
if ($.trim(msg) == '') {
    return false;
  }

то next будет показывать следующие этапы
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы