Question

有人可以帮我解决如何在下面的代码中添加onclick事件。我想在每个li元素上触发onclick事件。

areaServed

Answer 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函数？

1 个答案: