在cshtml文件中加載函數

Question

我正在使用具有4個導航選項卡的Web應用程序。

名為index.cshtml的主要cshtml文件包含4個nav選項卡作為部分視圖：

<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> 

Historie.cshtml文件具有2個功能：

ShowBookings();
CleanNoHistoryMessage();

如果將功能放在document.ready中，則每次WebApp執行功能時都需要更新。

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

    });

Historie.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（）事件處理程序附件：

將一個或多個事件的事件處理函數附加到所選元素。

可以點擊一下，因此您的代碼應類似於：

 $("#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>