Button click in jQueryUI tab problem

Question

I used jQueryUI tabs widget as fallow:

<div id="tabs">
    <ul>
        <li><a href="<%:Url.Action("List", new { statusId = 0, typeId = Model.TypeId }) %>">
            <span>X</span></a> </li>
        <li><a href="<%:Url.Action("List", new { statusId = 1, typeId = Model.TypeId }) %>">
            <span>Y</span></a> </li>
    </ul>
</div>

The list action return same view with different for each tab, the returned view something like this:

...
<form id="transactionList" method="post">
   <button type="button" id="approve">ok</button>
    <%: Html.Hidden("approveUrl", Url.Action("Approve"))%>
    <%: Html.Hidden("TransactionStatusId",Model.StatusId) %>    
<table>
    <tr>
...

I bind click of ok button in client side after tab load:

 $("#tabs").tabs({load: tabLoaded});
  function tabLoaded(e, ui) {
        $("#approve").click(approve);
    }
  function approve(){
alert("something);
}

Now when I change my tab to second tab, click button of second tab didn't work, and alert wouldn't show.

Any ideas?

Answer 1

If each view returns a button, you will have the same id for several buttons?

Change the id="approve" to class="approve" in your view and then change $("#approve") to $(".approve") instead.