在 cshtml 文件中加载函数

Question

我正在开发一个有 4 个导航选项卡的 Web 应用程序。

名为 index.cshtml 的主 cshtml 文件包含 4 个导航选项卡作为部分视图：

<div class="tab-content" id="mainTab" >
        <div class="tab-pane fade in active" id="@ViewData["Stamp"]" role="tabpanel" aria-labelledby="stempel-tab">
          @{ViewBag.Title = "Index";}
          @{Html.RenderAction("_Stempel", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["BackDated"]" role="tabpanel" aria-labelledby="backdated-tab">
          @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_BackDated", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["History"]" role="tabpanel" aria-labelledby="historie-tab">
           @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_Historie", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["ChangePin"]" role="tabpanel" aria-labelledby="changepin-tab">
           @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_Pinaendern", "Home");}          
        </div>
    </div> 

Histori.cshtml 文件有 2 个功能：

ShowBookings();
CleanNoHistoryMessage();

如果我将函数放在 document.ready 中，我需要在每次 WebApp 执行函数时更新。

 $(document).ready(function () {
        ShowBookings();
        CleanNoHistoryMessage();

    });

History.cshtml

<script type="text/javascript">


        $(document).ready(function () {
            ShowBookings();
            CleanNoHistoryMessage();

        });


        function ShowBookings() {

             // Some Code
            }

        function CleanNoHistoryMessage() {

            // Some Code
            }


    </script>

    @{
        Layout = null;
    }

    <h3>@ViewData["TextLabel_BookingHistoryHeadline"]</h3>

    <ul data-role="listview">
        <div data-role="fieldcontain">

            <ul id="Liste">
                <li>@ViewData["TextLabel_BookingHistoryNoBookings"]</li>
            </ul>

        </div>

     </ul>

我想在每次点击选项卡时执行这些功能。我该怎么做？

Answer 1

使用 jQuery .on() 事件处理程序附件：

将一个或多个事件的事件处理函数附加到所选元素。

在点击时是 spicifique，所以你的代码是这样的：

$("#mainTab .tab-pane").on("click", function() {
  console.log($(this).text() + "Is clicked");
  /*    ShowBookings();
        CleanNoHistoryMessage(); */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tab-content" id="mainTab">
  <div class="tab-pane fade in active"  role="tabpanel" aria-labelledby="stempel-tab">
    tab1
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="backdated-tab">
    tab2
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="historie-tab">
    tab3
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="changepin-tab">
    tab4
  </div>
</div>