获取动态生成的元素的内容并将其放在“before parent”元素之前

Question

我有以下代码：

<input id="from" type="text">
<div id="fromlist">
  <div class="item_element">Value 1</div>
  <div class="item_element">Value 2</div>
</div>

动态生成所有div个类.item_element。

所以我需要设置#from元素的值，其中包含用户点击的任何.item_element的内容。

我尝试了以下内容：

$('.item_element').on('click',function(){alert($(this).contents());});

但是这段代码警告＆＃34; [object Object]＆＃34;不是我预期的字符串。

此外：即使我将获得item_element的内容，我也不知道如何指向before parent元素（在我的情况下为#from）。

有什么想法吗？

Answer 1

你需要

$('#fromlist').on('click', '.item_element', function () {
    console.log($(this).contents());
    $(this).parent().prev().val($(this).text())
});

演示：Fiddle

---

如果你确定输入元素的id，那么它就像

一样简单

$('#fromlist').on('click', '.item_element', function () {
    $('#from').val($(this).text())
});

演示：Fiddle

• 警报将显示[object Object]，因为.contents()会返回一个jQuery对象，当被警告时会显示[Object object] - 而是使用控制台日志记录。

Answer 2

使用事件委托（，因为您的元素是动态生成的）

$('#fromlist').on('click','.item_element',function(){
   $('#from').val($(this).text());
});

演示---> http://jsfiddle.net/ep8R5/1/

----> https://learn.jquery.com/events/event-delegation/

Answer 3

尝试.text()

$('#fromlist').on('click', '.item_element', function () {
    $(this).closest('#fromlist').prev().val(($(this).text());
});