javascript - 为什么我的脚本(更改 css 样式)在 UpdatePanel 中不起作用？

Question

我有一个 UpdatePanel里面有以下代码:

<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:我正在使用 Bootstrap和我的 UpdatePanel在Modal里面.

这是我的 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>

所以我的问题是当我打开 Modal UpdatePanel更新和我的 Script什么都不做，当我更改 View在 Multiview我想添加 class "active"到我的li标记，但仅当我单击 item0 时, item1或 item2默认 View 是 item0 .

nav里面UpdatePanel

---

nav外面UpdatePanel

如果我没有说清楚，请随时问我。

编辑:

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

Answer 1

请试试这个

<div class="wrapper">

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

    <nav class="navbar test-bar">  
        <ul class="nav nav-tabs nav-justified">
            <li class="item0 active"><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>

</div>


**JQuery**
$( function() { // Document Ready
    $('.test-bar .nav li').on('click', '.wrapper', function(){
        $('.test-bar .nav li').removeClass('active'); // Corrected Line
        $(this).addClass('active');
    });
});