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未捕获的ReferenceError：未定义搜索在HTMLAnchorElement.onclick（DaysOffer：193）

我该如何解决它。

提前致谢。

Answer 1

您已在Search()处理程序中定义了document.ready函数，因此它不在window的范围内，因为它在您调用时需要来自on*事件属性的函数。您的Count()和ListResult()函数也是如此。

要解决此问题，请将函数定义移动到正确的范围（即在$(document).ready()之外），或使用不显眼的事件处理程序将事件附加到JS代码中。后者是迄今为止更好的方法。

Answer 2

将您的功能移到document.ready()之外。他们没有必要在那里，因为无论如何他们都不会立即执行。你遇到了一个范围问题 - 你的内联事件处理程序无法看到document.ready中的函数，因为它希望它们位于全局窗口上下文中，而它们不是。

或者，在HTML中使用不显眼的事件处理程序而不是内联的事件处理程序通常会使您的代码更清晰，更易于维护。

Answer 3

在就绪功能之外定义功能：

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>

jQuery函数在我的MVC应用程序中不起作用

3 个答案: