asp.net如何在无序的列表元素上添加 onClick 函数?

发布时间: 2016/9/19 0:41:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

有人可以帮如何添加 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>           

解决方法 1:

这可以很容易通过实施客户端侧单击事件使用 jQuery 每次用户点击 <li> 元。

里面的 click 事件 <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>
赞助商