部分视图部分适用于 JQuery，但不完全适用于 C# ASP.Net MVC 5

Question

这是一个ASP.Net MVC 5 项目。

我有一个简单的jQuery 在鼠标悬停时淡入淡出HTML 元素，如图所示：

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

用于以下部分MyPartialView.cshtmlView（jQuery 脚本在同一个MyPartialView.cshtml 文件中）：

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

这是jQuery的效果：

这没关系...但是，上面的部分MyPartialView.cshtml 在另一个cshtml 文件中被多次调用，如下所示：

@if (Model != null) {
  <hr/>
  if (Model.Any()) {
    foreach (var item in Model) { //do something foreach item
      @Html.Partial("MyPartialView", item);
    }
  }
}

导致页面呈现如下：

---

---

如您所见，字母“a”有三个不同的结果（每个结果呈现一个 MyPartialView.cshtml），每个结果旁边都有三个字形图标 - 已淡出。

现在，前两个“a”显示鼠标悬停时的预期行为：

好的

---

---

但最后一个“a”没有显示预期的行为，虽然鼠标悬停在它上面，但淡入淡出不起作用：

不行

---

---

我注意到问题发生了，只要上面的查询结果（在这种情况下是第二个“a”）有有序列表（如上面的 1、2、3），那么下面的MyPartialView.cshtml 不显示期望的行为。正如您在我的示例中注意到的那样，第一个“a”没有有序列表 - 因此淡入和淡出有效。第二个“a”有有序列表 - 淡入和淡出也可以。但是第三个“a”是在带有有序列表的查询结果之后 - 它不起作用。

当查询结果只有两个并且第一个具有有序列表时，行为是一致的，然后第二个中的淡入和淡出不显示。

因此，我怀疑有序列表有问题，但我不知道为什么。这是我的MyPartialView.cshtml：

@using MyProject.Models
@using System.Linq;
@model ResultPerPhrase

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

@if (Model.results.Count() > 1) {
  <ol>
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
          <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
          <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
        </span>
      </li>
    }
  </ol>
} else {
  <ul style="list-style: none;" class="adjusted-par">
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <small>
            <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
            <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
            <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
          </small>
        </span>
      </li>
    }
  </ul>
}

这里可能出了什么问题？

Answer 1

这就是为什么您的 JavaScript 代码运行 before 而您的 Html Dom 已加载。为了避免这种行为，您需要将您的 JavaScript 代码包含在 $(document).ready(f‌​unction(){ yourCodeHere }) 或 $(function(){ yourCodeHere }（速记版本）内。你可以在这里查看文档：https://learn.jquery.com/using-jquery-core/document-ready/

所以您的代码需要稍作改动：

 $(function(){
     $('.entrisButton').hover(function ()
         { $(this).fadeTo(1, 1); },
         function ()
         { $(this).fadeTo(1, 0.1); 
     });
 });

Answer 2

由于您将悬停脚本放在MyPartialView.cshtml 中，如果您只是将代码包装在$(function(){...} 中，那么当您多次调用部分方法时，它将多次将悬停事件绑定到元素。

检查此jsFiddle Demo。您可以在控制台中看到，当鼠标悬停在控制台中的 div 上时，会打印两行，因为触发了两个事件。

您应该将悬停脚本移到MyPartialView.cshtml 之外，或者在绑定悬停事件之前进行检查。检查此SO Answer 或检查此更新jsfiddle Demo（注意here2 未打印在控制台中）