如何正确记录通过 Ajax 加载的内容答案

【问题标题】：How To Properly log content loaded via Ajax如何正确记录通过 Ajax 加载的内容
【发布时间】：2019-06-28 14:21:15
【问题描述】：

我有一个通过 Ajax、两个 div 和一个列表加载的内容。现在，当我在其中一个 div 中键入内容时，我只想在其中一个 div 中单击列表项以仅 console.log 我正在键入的 div，如果我键入第二个并单击列表项到 console.log第二个div。问题是在刷新页面之前，我总是点击第一个。

这是 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 -->

【问题讨论】：

您将在 every 列表项的 every input 事件上添加一个新的 click 事件处理程序。
我正在尝试 console.log currentElement，所以如果我在 .reply-area 中输入内容 currentElement 应该是 .reply-area。问题是，如果我点击 .comment-area 或如果我首先在评论区输入，则 currentElement 不会改变，那么一旦我在 .reply-area 中输入内容，它就不会改变为回复区

标签： javascript jquery ajax

【解决方案1】：

您必须将li 点击事件移出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 -->

【讨论】：

@DenisOmerovic 没问题，很乐意提供帮助

【解决方案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

【讨论】：