Why my Script (to change css style) doesn't work inside UpdatePanel?

Question

I have a UpdatePanel with de following code inside:

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
  <ContentTemplate>

<nav class="navbar">  
  <ul class="nav nav-tabs nav-justified">
   <li class="item0"><a href="#" onserverclick="btnhoje" runat="server">Hoje</a></li>
   <li class="item1"><a href="#" onserverclick="btnserie" runat="server">Série</a></li>
   <li class="item2"><a href="#" onserverclick="btnutente" runat="server">Utente</a></li>
  </ul>
</nav>

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  <asp:View ID="Tab1" runat="server">
...
  </asp:View>
  <asp:View ID="Tab2" runat="server">
...
  </asp:View>
  <asp:View ID="Tab3" runat="server">
...
  </asp:View>
</asp:MultiView>

  </ContentTemplate>
</asp:UpdatePanel>

PS: I'm using Bootstrap and my UpdatePanel is inside a Modal.

And here is my Script:

<script>
  var CurrentView = <%= MultiView1.ActiveViewIndex %>;
  if (CurrentView == 0){
    $('a').closest('ul').find('.item0').addClass('active');
  }
  else if (CurrentView == 1){
    $('a').closest('ul').find('.item1').addClass('active');
  }
  else if (CurrentView == 2){
    $('a').closest('ul').find('.item2').addClass('active');
  };
</script>

So my problem is when I open the Modal the UpdatePanel update's and my Script doesn´t do anything and when I change the View in Multiview I wanted to add class "active" to my li tag but only when I click in item0, item1 or item2 and default view is item0.

nav inside UpdatePanel

---

nav outside UpdatePanel

If I didn't made myself clear feel free to ask me.

EDIT:

$('.teste-bar .nav li').on('click', 'body', function(){
  $('.teste-bar .nav li').removeClass('active');
  $(this).addClass('active');
});

Answer 1

The following code is HTML:

<nav class="navbar">  
    <ul class="nav nav-tabs nav-justified">
        <li id="item0" class="active"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '0', 'MainContent_Button1')">Hoje</a></li>
        <li id="item1"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '1', 'MainContent_Button1')">Série</a></li>
        <li id="item2"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '2', 'MainContent_Button1')">Utente</a></li>
    </ul>
</nav>
<asp:HiddenField ID="HiddenField2" runat="server" />

    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
      <ContentTemplate>

    <asp:Button ID="Button1" CssClass="hidden" runat="server" OnClick="btnViews" />

    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
      <asp:View ID="Tab1" runat="server">
    ...
      </asp:View>
      <asp:View ID="Tab2" runat="server">
    ...
      </asp:View>
      <asp:View ID="Tab3" runat="server">
    ...
      </asp:View>
    </asp:MultiView>

      </ContentTemplate>
    </asp:UpdatePanel>

My Script:

<script>
    function view(servercontrolid, indexcontrolid, index, controlclick) {

        var up = document.getElementById(servercontrolid);
        var control = document.getElementById(controlclick);

        if (up) {
            document.getElementById(indexcontrolid).value = index;
            control.click();
        }

        if (index == 0) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item0').addClass('active');
        } else if (index == 1) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item1').addClass('active');
        } else if (index == 2) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item2').addClass('active');
        }
    }

</script>