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>元素内的Product Name传递给另一个输入元素。我怎么能这样做？

Answer 1

由于li是动态创建的，因此需要使用事件委派，因为<li>在执行代码时不会在dom上。此示例代码应该适合您。试试吧：

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

Answer 2

由于我看到你正在使用jQuery，你可以像这样绑定ul的“click”事件：

Private Sub CancelButton_Click()
   Unload Me
ThisWorkbook.Save
   End
End Sub

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>元素

3 个答案: