Question

我有一个通过Ajax，两个div和一个列表加载的内容。现在简单地我想当我在其中一个div中键入某些内容时，以及当我单击列表项以仅console.log键入我要输入的div时，以及如果我键入第二个并单击列表项以进行console.log那个，第二个分区问题在于，在刷新页面之前，我总是获得单击的第一个。

这里是jsfiddle，目前可以按照我的要求运行，但这是静态内容，并且我通过Ajax加载了一个contant

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点击事件移出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

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

2 个答案: