jQuery関数がMVCアプリケーションで動作していません

Question

私のMVCアプリケーションonclickで機能が動作していません。上記のコードで

@section Scripts{ 
    <script src="~/Scripts/plugins/toastr/toastr.min.js"></script> 
    <script> 
     $(document).ready(function() { 

      var page = 0; 
      var type = "Category"; 

      function Count(param) { 
       if (param === 1) { 
        page++; 
       } 
       else if (param === -1) { 
        if (count === 0) { 
         return; 
        } 
        page--; 
       } 

      } 

      function Search() { 
       var query = $("#searchquery").val(); 

      } 

      function ListResult(param) { 

       if (param === "Category") { 
        type = param; 
        page = 0; 
        $(".category_type").css({ "color": "green" }); 
       } else if (param === "Product") { 
        type = param; 
        page = 0; 
        $(".product_type").css({ "color": "green" }); 
       } 

      } 
     }); 
    </script> 
} 

、そこに自分のコードのscriptタグであり、以下のコードは、HTML部分です。なぜそれが動作していないのか分かりません。 タグが機能しているかどうかをテストするアラートを書きました。それは働いているが、問題は、私はそれを解決するにはどうすればよいfunction is not defined

<a class="btn btn-lg btn-primary" type="button" onclick="Search()"> 
          @Resources.Resource.btn_Search 
         </a> 
<a class="btn btn-white btn-sm" onclick="Count(1)"><i class="fa fa-arrow-left"></i></a> 
       <a class="btn btn-white btn-sm" onclick="Count(-1)"><i class="fa fa-arrow-right"></i></a> 

    <li><a href="#" onclick="ListResult('Category')" class="category_type type"style="color: green"><i class="fa fa-folder category_type type"style="color: green"></i> @Resources.Resource.Categories</a></li> 
          <li><a href="#" onclick="ListResult('Product')"class="product_type type"><i class="fa fa-folder product_type type"></i> @Resources.Resource.Products</a></li> 

DaysOffer:193 Uncaught ReferenceError: Search is not defined at HTMLAnchorElement.onclick (DaysOffer:193)

です。

ありがとうございます。

Answer 1

あなたはdocument.readyハンドラ内Search()機能を定義したので、それはあなたがon*イベント属性から関数を呼び出すときにする必要があるとして、それは、windowの範囲ではありません。あなたのCount()とListResult()の機能も同じです。

これを修正するには、関数定義を正しいスコープ（つまり、$(document).ready()の外側）に移動するか、邪魔にならないイベントハンドラを使用してJSコードにイベントをアタッチします。後者ははるかに優れたアプローチです。

Answer 2

document.ready()以外の機能を移動します。とにかくそれらがすぐに実行されないので、彼らがそこにいる必要はありません。あなたはスコープの問題を抱えています.Inlineイベントハンドラは、グローバルウィンドウのコンテキストにあると期待しているため、document.ready内の関数を見ることができません。

または、HTMLのインラインオブジェクトではなく目立たないイベントハンドラーを使用してください。 は、一般的にコードをより明確にし、保守しやすくします。

Answer 3

機能外レディ機能の定義：あなた `li`要素は` ul`または `ol`の内側にする必要があること

var page = 0; 
 
var type = "Category"; 
 

 
function Count(param) { 
 
    if (param === 1) { 
 
    page++; 
 
    } else if (param === -1) { 
 
    if (count === 0) { 
 
     return; 
 
    } 
 
    page--; 
 
    } 
 

 
} 
 

 
function Search() { 
 
    alert("Search function triggered") 
 
    var query = $("#searchquery").val(); 
 

 
} 
 

 
function ListResult(param) { 
 

 
    if (param === "Category") { 
 
    type = param; 
 
    page = 0; 
 
    $(".category_type").css({ 
 
     "color": "green" 
 
    }); 
 
    } else if (param === "Product") { 
 
    type = param; 
 
    page = 0; 
 
    $(".product_type").css({ 
 
     "color": "green" 
 
    }); 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<a class="btn btn-lg btn-primary" type="button" onclick="Search()"> 
 
          @Resources.Resource.btn_Search 
 
         </a> 
 
<a class="btn btn-white btn-sm" onclick="Count(1)"><i class="fa fa-arrow-left"></i></a> 
 
<a class="btn btn-white btn-sm" onclick="Count(-1)"><i class="fa fa-arrow-right"></i></a> 
 

 
<li><a href="#" onclick="ListResult('Category')" class="category_type type" style="color: green"><i class="fa fa-folder category_type type"style="color: green"></i> @Resources.Resource.Categories</a></li> 
 
<li><a href="#" onclick="ListResult('Product')" class="product_type type"><i class="fa fa-folder product_type type"></i> @Resources.Resource.Products</a></li>