获取动态创建的LI元素的内部值

Question

我正在尝试创建搜索建议列表。为此，我使用append函数动态创建了列表。出于搜索目的，我将data-search-term属性和innerHTML元素的li值设置为相同。现在我需要的是当用户点击任何li元素时，搜索字段应该获得innerHTML值。谷歌搜索就是这么简单。我已经尝试使用事件委托来获取被点击的元素，但它不起作用。以下是该功能仅用于检查事件委托是否正常，但我的网页上没有弹出。

$("#suggestions").on("click", "a", function() {
    confirm("clicked");
});

搜索建议列表具有ID 建议。

这是我的搜索字段，其中所选元素的值需要去。

<input class="form-control" name="query" type="text" placeholder="Offer" />

此处还有创建列表的代码。

var searchitems = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];

var len = searchitems.length;
var i;
for (i = 0; i < len; i++) {
    $('#suggestions').append('<li class="suggestItem">' + '<a>' + searchitems[i] + '</a>' + '</li>');
}

Answer 1

您需要在click元素上收听.suggestItem个事件，而不是#suggestions所代表的整个列表。看一下下面的例子。

＆＃13;

＆＃13;

$(".suggestItem").on("click", "a", function(e) {
  e.preventDefault();
  $('#selected-item').val($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="suggestions">
  <li class="suggestItem"><a href="">Item 1</a>
  </li>
  <li class="suggestItem"><a href="">Item 2</a>
  </li>
  <li class="suggestItem"><a href="">Item 3</a>
  </li>
  <li class="suggestItem"><a href="">Item 4</a>
  </li>
  <li class="suggestItem"><a href="">Item 5</a>
  </li>
</ul>

<input id="selected-item" type="text" placeholder="selected value will appear here" />

＆＃13;

＆＃13;

＆＃13;