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的原因。为了避免此类行为，您需要将javascript代码括在$(document).ready(f‌unction(){ yourCodeHere })内或$(function(){ yourCodeHere }内（简写版）。您可以在此处查看文档：{{3}}

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

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

Answer 2

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

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

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

部分视图部分使用JQuery但不完全C＃ASP.Net MVC 5

2 个答案: