jQuery 悬停功能不适用于 ng-repeat 角度对象

Question

我已经创建了一个 jQuery 悬停函数：

$('.deleteButton').hover(function(){
    $(this).css('opacity', '1');
},
function(){ 
    $(this).css('opacity', '.5');
});

当我将 HTML 元素硬编码到 index.html 文档中时，它起作用了，但当我从模板导入元素时不起作用。

下面的模板：

<div class="logBox">
<div class="dateAndLocation">
    <p>{{ info.date | date }}</p>
    <p style="margin-top:-.7em">{{ info.location }}</p>
</div>
<div class="routeNameBox">
    <p class="routeName">{{ info.routeName }}</p>
    <p class="gradeAndType">{{ info.grade }} | {{ info.type }}</p>
</div>
<div class="timeAndLevelBox">
    <div class="timeBox pull-left">
        <p class="timeText">{{ info.time }}</p>
    </div>
    <div class="pclBox pull-right">
        <p class="pclText">{{ info.challengeLevel }}</p>
    </div>
</div>

<div class="notesBox">
    <p class="notesText">{{ info.notes }}</p>
</div>

<div class="photoCircle" style="background-image:url({{ info.photo }})"></div>
</div>

<div class="deleteButton"><p>&#8212;</p></div>

index.html 代码：

<div class="container" style="min-width:1200px; margin:auto;" ng-repeat="climbLog in climbLogs">
    <climb-log info="climbLog"></climb-log>
<div>

它工作正常并按预期重复.. 但是当我将鼠标悬停在删除按钮上时，它不会改变它的不透明度，正如 jQuery 函数中指定的那样（在我开始使用模板之前已经工作）

Answer 1

直接的问题是$(...).hover(...) 只会收集当前存在的节点，并在它们上附加hover 处理程序。因此，任何最终可能与选择器匹配的未来节点都将没有处理程序。

使用 jQuery 的 on（带有实时选择器功能）解决了这个问题：$('#placeWithDeleteButtons').on('hover', '.deleteButton', ...)。这会将处理程序附加到捕获冒泡事件的祖先上，并检查触发的后代是否与选择器匹配。因此，由于处理程序不在触发器上，因此您只需要一个处理程序即可在任何当前或将来的匹配节点上捕获事件。

但是，正如 cmets 所指出的，如果您正在从事 Angular 项目，则最好使用 Angular 的等价物。

编辑：确实，hover 必须分解为 mouseenter 和 mouseleave：

$('.logBox').on("mouseenter mouseleave", ".deleteButton", function(evt) {
  $(this).css('opacity', evt.type === 'mouseenter' ? 1 : 0.5);
});

.deleteButton {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logBox">
  <button class="deleteButton">Foo</button>
</div>

但是，如果您只想更改悬停时的不透明度，则有一种更简单的方法：

.deleteButton {
  opacity: 0.5;
}
.deleteButton:hover {
  opacity: 1;
}
  

<div class="logBox">
  <button class="deleteButton">Foo</button>
</div>