Question

I’m using a jQuery tab in my MVC3 solution. The problem is that when I insert a link in one of these tabs, I’m not able to control this link with jQuery?!

Here is my code:

The main tab subdivision page:

<div id="tabContainer">
<ul>
    <li>@Html.ActionLink("Tab 1", "DetailFooterTab1", "MyController")</li>
    <li>@Html.ActionLink("Tab 2", "DetailFooterTab2", "MyController")</li>
    <li>@Html.ActionLink("Tab 3", "DetailFooterTab3", "MyController")</li>
</ul>

with this script:

$("#tabContainer").tabs();

In my Tab3 page I have this code:

<a href="#" id="buttonTest">Test</a>

<script type="text/jscript">

$("#buttonTest").click(function () {
    alert('I am a link in the Tab 3 page');
});

</script>

These jQuery tabs works. I mean I can click on one of these and the system is showing the corresponding tab (and hiding other tab content). BUT When I click the test link, nothing happened! Any idea?

Answer 1

did you put your code on $(document).ready ?

$(document).ready(function(){
   $("#buttonTest").click(function () {
     alert('I am a link in the Tab 3 page');
   });
});

or if that element added on dom later. you can use live event
like

$("#buttonTeest").live('click',funciton(){
    alert('I am a link in the Tab 3 page');
});