如何在无序列表元素上添加 onClick 功能？
Posted
技术标签:
【中文标题】如何在无序列表元素上添加 onClick 功能？【英文标题】：How to add onClick function on unordered list element? 【发布时间】：2016-12-12 17:07:11 【问题描述】：有人可以帮助我如何在下面的代码中添加 onclick 事件。 我想在每个 li 元素上触发 onclick 事件。
<ul id="tree1">
<li OnClick="Button3_Click" runat="server">
<i class='fa fa-institution' style='color: #fff;'></i>
Add Institute
<ul></ul>
</li>
<li OnClick="Button4_Click" runat="server">
<i class='fa fa-puzzle-piece' style='color: #fff;'></i>
Test
<ul></ul>
</li>
<li OnClick="Button5_Click" runat="server">
<i class='fa fa-area-chart' style='color: #fff;'></i>
Analysis
<ul></ul>
</li>
<li OnClick="Button6_Click" runat="server">
<i class='fa fa-book' style='color: #fff;'></i>
Library
<ul></ul>
</li>
<li OnClick="Button7_Click" runat="server">
<i class='fa fa-bookmark' style='color: #fff;'></i>
Bookmark
<ul></ul>
</li>
</ul>
【问题讨论】：
你想调用服务器端函数还是客户端（javascript）？ 【参考方案1】：这可以通过在每次用户点击<li> 元素时使用 jQuery 实现客户端点击事件来轻松实现。
在<li> 的点击事件中，您可以检查哪个项目被点击并使用$.ajax 和[WebMethod]. 进行服务器端调用
背后的代码：
[System.Web.Services.WebMethod]
public static string LiClick(string item)
System.Diagnostics.Debugger.Break();
return String.Format("You clicked on - 0", item);
.ASPX：
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function ()
$(".li").click(function ()
var text = $(this).text().trim();
$.ajax(
type: "POST",
url: "UnorderedListExample.aspx/LiClick",
contentType: "application/json;charset=utf-8",
data: 'item:"' + text + '"',
success: function (data)
var data = data.d;
alert(data)
,
error: function (errordata)
console.log(errordata);
);
);
);
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="tree1">
<li class="li">
<i class='fa fa-institution' style='color: #fff;'></i>
Add Institute
<ul></ul>
</li>
<li class="li">
<i class='fa fa-puzzle-piece' style='color: #fff;'></i>
Test
<ul></ul>
</li>
<li class="li">
<i class='fa fa-area-chart' style='color: #fff;'></i>
Analysis
<ul></ul>
</li>
<li class="li">
<i class='fa fa-book' style='color: #fff;'></i>
Library
<ul></ul>
</li>
<li class="li">
<i class='fa fa-bookmark' style='color: #fff;'></i>
Bookmark
<ul></ul>
</li>
</ul>
</form>
</body>
【讨论】：
以上是关于如何在无序列表元素上添加 onClick 功能？的主要内容，如果未能解决你的问题，请参考以下文章