Wie fügt man die onClick-Funktion auf ein ungeordnetes Listenelement hinzu?

kann mir bitte jemand helfen, wie man onclick event im unteren code hinzufügt. Ich möchte onclick Ereignis auf jedem li Element auslösen.Wie fügt man die onClick-Funktion auf ein ungeordnetes Listenelement hinzu?

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

Quelle

2016-08-06 vimal mishra

Sie möchten serv anrufen er Side-Funktion oder Client-Seite (JavaScript)? – Sami

Dieses leicht eine Client-Seite Click-Ereignis durch die Implementierung mit jQuery jedes Mal ein Benutzer klickt auf ein <li> Element erreicht werden kann.

Im Inneren des Click-Ereignis für die <li> können Sie überprüfen, welche Artikel geklickt wurde und eine serverseitige Anruf von $.ajax verwenden und ein [WebMethod].

-Code hinter:

[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>

Quelle

2016-08-06 11:56:05

Danke für die Hilfe !! Es funktionierte. –

Wie fügt man die onClick-Funktion auf ein ungeordnetes Listenelement hinzu?

Antwort

Verwandte Themen