ASP.NET link button doesn't work with jquery

Question

I have a jQuery plugin that is use for tabbing menu like this code:

div id="tabsWithStyle" class="style-tabs">
        <ul>
             <li>
                <asp:LinkButton ID="Tozih"  OnClick="Tozih_Click" href="#facebook"  runat="server"><div class="icon picasa-icon">توضیح</div></asp:LinkButton>
            </li>
                <li>
                <asp:LinkButton ID="books" OnClick="books_Click"     runat="server"><div class="icon picasa-icon">کتاب</div></asp:LinkButton>
            </li>
              <li>
                <asp:LinkButton ID="jozve" OnClick="jozve_Click"  href="#facebook"  runat="server"><div class="icon picasa-icon">جزوه</div></asp:LinkButton>
            </li>
</ul>

and the jQuery is:

    <script type="text/javascript">
        $(function () {
            $('#tabsWithStyle').tabs();
        });
    </script>

also #facebook is a div

   <div id="facebook">
countent
</div>

Edit : it's server-side event (C# code).

My problem is that onClick events don't work when I click on it

What's my problem ?

Edit 2 :

enter image description here

Edit 3:

protected void books_Click(object sender, EventArgs e)
{
    Response.Redirect("NewsFeed.aspx");
}

and lastly $('#id_of_control').click(function() { }); will hook up client side event handling with jquery. — brumScouse, Apr 16 '14 at 15:05
can you also add the output HTML probably it is rendering some layout tabs plugin does like.. — Onur Topal, Apr 16 '14 at 15:13
I meant HTML just view source in the browser and copy-past the div#tabsWithStyle. and as a other suggestion what happens when you try the tab with html a tag instead of asp.net just give it a link... — Onur Topal, Apr 16 '14 at 15:19
are you saying the server event is not getting fired? Did you write `protected` for the event in C#? Can you please add that to your question? Or client event? — Venkata Krishna, Apr 16 '14 at 15:21
@Oli - if you have `href="#facebook"` it doesn't work, it will override the server event. But if you remove the href attribute, it will work. — Venkata Krishna, Apr 16 '14 at 15:30
@krishna if i remove href="#facebook" the jquery will be stop! — Mohammad Olfatmiri, Apr 16 '14 at 15:32
@Oli - adding href attribute is not jquery. You might want to handle a client side click event & return false/true based on your requirement. also it's not valid to have href to .net LinkButton — Venkata Krishna, Apr 16 '14 at 15:35
@Oli - helpful info here.. http://stackoverflow.com/a/20227176/489512 — Venkata Krishna, Apr 16 '14 at 15:43

score 1 · Accepted Answer · answered Apr 16 '14 at 15:10

1

Try this

$("#Tozih").on("click", function(event){
alert("clicked on Tozih"); 
});

answered Apr 16 '14 at 15:10

Dextere

281
1
3
13

its a server side event – Mohammad Olfatmiri Apr 16 '14 at 15:13

score 0 · Answer 2 · answered Apr 16 '14 at 15:38

0

Since you are using serverside control you need to use client id:

$('#<%= Tozih.ClientID %>').on('click', function(){
  //your code, 'this' is a clicked element
});

answered Apr 16 '14 at 15:38

cinek

1,888
2
13
14

score 0 · Answer 3 · answered Apr 17 '14 at 04:33

0

Try this.

In your Linkbutton add one attribute causesvalidation

<asp:LinkButton ID="jozve" OnClick="jozve_Click" causesvalidation="false"  href="#facebook"  runat="server"><div class="icon picasa-icon">جزوه</div></asp:LinkButton>

answered Apr 17 '14 at 04:33

AB Vyas

2,349
6
26
43

ASP.NET link button doesn't work with jquery

3 Answers3