如何通过单击 <li> 元素将值传递给 javascript

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);
});

如何通过单击 <li> 元素将值传递给 javascript

how to pass value to javascript through clicking <li> element

html

javascript

jquery

mouseevent

html-lists