jQuery悬停函数没有'不要处理ng个重复的有角度的物体

jQuery hover function doesn't work on ng-repeat angular objects

本文关键字：ng 函数 悬停 jQuery 处理      更新时间：2023-09-26

我创建了一个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函数中所指定的那样(在我开始使用模板之前它已经工作了(

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

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

然而，正如注释所示，如果您正在处理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>

相关文章：