Как правильно регистрировать контент, загруженный через Ajax

Question

У меня есть контент, загруженный через Ajax, два div и один список.Теперь я просто хочу, чтобы когда я что-то набирал в одном из div и когда я нажимал на элемент списка, просто на console.log, на который я набирал div, а если я набираю второй и нажимал на элемент списка в console.log,второй див.Проблема в том, что я всегда получаю первое нажатие до тех пор, пока не обновлю страницу.

Вот jsfiddle, в настоящее время это работает, как я хочу, но это статический контент, и у меня загружена константа через Ajax

https://jsfiddle.net/chille1987/rb5aqv9d/35/

$(document).on('input', '.reply-area, .comment-area', (e) => {
  currentElement = e.target;
  $('.list').show();

  $('.list li').click((e) => {
    e.stopImmediatePropagation();
    console.log(currentElement);
  })
})

div {
  border: 1px solid black;
  margin-bottom: 20px;
}

.list {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reply-area" contenteditable="true"></div>
<div class="comment-area" contenteditable="true"></div>

<ul class="list">
  <li>First Child</li>
  <li>Second Child</li>
  <li>Third Child</li>
</ul>

<!-- This content is loaded via Ajax -->

Answer 1

Вы должны переместить событие li click из события input.

var currentElement;
$(document).on('input', '.reply-area, .comment-area', (e) => {
  currentElement = e.target;
  $('.list').show();
})

$('.list li').click((e) => {
  e.stopImmediatePropagation();
  console.log(currentElement);
})

Демо

var currentElement;
$(document).on('input', '.reply-area, .comment-area', (e) => {
  currentElement = e.target;
  $('.list').show();
})

$('.list li').click((e) => {
  e.stopImmediatePropagation();
  console.log(currentElement);
})

div {
  border: 1px solid black;
  margin-bottom: 20px;
}

.list {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reply-area" contenteditable="true"></div>
<div class="comment-area" contenteditable="true"></div>

<ul class="list">
  <li>First Child</li>
  <li>Second Child</li>
  <li>Third Child</li>
</ul>

<!-- This content is loaded via Ajax -->

Answer 2

Вы можете сохранить последний класс поля ввода в атрибуте списка данных. После ввода данных обновляется. При нажатии на элемент списка вы получите последний обновленный ввод из этого поля данных.

$(document).on('input', '.reply-area, .comment-area', (e) => {
  $('.list').show();
  $(".list").data('last-input', $(e.target).attr('class'));
});

$('.list li').click((event) => {
  event.stopImmediatePropagation();
  console.log($('.list').data('last-input'));
});

jsFiddle