如何通過點擊將價值傳遞給javascript <li> 元件

Question

我有以下無序列表，它是通過JQuery .ajax從數據庫中動態填充的，其中有一些列表項是產品名稱。

<ul id="here">
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
</ul>

我可以使用以下代碼通過css中的鼠標事件將其懸停在上面

li:hover {background: #ccc; cursor: pointer;}

用於填充<li>的javascript代碼如下：

var pr= [Product1, Product2, Product3, Product4, Product5];
for (var option in pr){
var newLi = document.createElement("li");
newLi.innerHTML=pr[option];
$("#here").append(newLi);}

但我想給的產品名稱里面傳<li>元素通過JavaScript或JQuery的另一個輸入元素，當<li>單擊元素。 我怎樣才能做到這一點？

Answer 1

由於li是動態創建的，因此您需要使用事件委托，因為<li>在執行代碼時不會處於dom狀態。 此示例代碼將為您工作。 試試吧：

var clickLiData = "";
$("#here").on("click","li",function()
{
 clickLiData = $(this).html();
})

Answer 2

由於我看到您正在使用jQuery，因此您可以像這樣綁定ul的“ click”事件：

$("#here").on("click", "li", function(evt) {
   $("#your_Input_Id").val(evt.target.innerHTML);
});

jsfiddle的示例： https ：//jsfiddle.net/bkbtert9/

Answer 3

假設目標輸入是文本。

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

<input type="text" name="text" id="text">

因此，這是所需結果的javascript。

$("li").click(function() {
    $item = $(this).html();
    $("#text").val($item);
});