局部视图部分（但不是完全）与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.cshtml View （ 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 before运行的原因。 为了避免这种行为，您需要将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演示 。 您可以在控制台中看到，当鼠标悬停在控制台中的div上时，会打印两行，因为会触发两个事件。

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