Javascript jQuery悬停函数不使用'；不要在有角度的物体上重复工作

我创建了一个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>

{{info.date | date}

{{info.location}
{{info.routeName}
{{info.grade}}{{info.type}
{{info.time}
{{info.challengeLevel}
{{info.notes}
—

index.html代码：

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

---

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

直接的问题是，

$（…）.hover（…）

将只收集当前存在的节点，并在它们上附加一个

hover

处理程序。因此，将来可能最终与选择器匹配的任何节点上都不会有处理程序

在上使用jQuery的

（带有实时选择器功能）可以解决此问题：
$（“#placeWithDeleteButtons”）.on（'hover'、'.deleteButton'、…）
。这将在捕获冒泡事件的祖先上附加处理程序，并检查触发子体是否与选择器匹配。因此，由于处理程序不在触发器上，因此您只需要一个处理程序就可以捕获任何当前或未来匹配节点上的事件

然而，正如评论所指出的，如果您正在处理Angular项目，则最好使用Angular的等效项

编辑：实际上，
悬停
必须分解为
mouseenter
和
mouseleave
：


$（'.logBox'）。打开（“mouseenter mouseleave”、“.deleteButton”，函数（evt）{
$（this.css（'opacity'，evt.type=='mouseenter'？1:0.5）；
});
.delete按钮{
不透明度：0.5；
}

福
不要将jQuery与angular一起使用，它不推荐使用，并且会导致许多问题。也许这个链接会给你一些帮助，jQuery在它能完成什么方面可以与Angular相媲美吗？我只是在想，我是应该尝试在这两方面的知识上折衷一下，还是应该完全投资于这两方面。我认为jQuery适用于静态网站，而Angular适用于动态网站/webapps。。。你会同意吗？在深入了解Angular之后，你可以使用jquery。你可以说（jquery适合静态网站，而Angular适合动态网站）。即使如此，这也只是因为angular很“重”，可以做很多事情，如果包含在一个简单的静态站点中，那将是一种浪费。但是不要像那样在同一个站点中混合它们。但是
.hover
的jquery文档说它只是
$（选择器）的简写形式但不适用于
$（AnteStorSelector）。在（“mouseenter mouseleave”，selector，handlerInOut）
（实时语法），这就是我所说的。你是对的，
悬停
需要分解为
mouseenter
和
mouseleave
。我稍后会举一个例子。看看你的（非常彻底的答案）。我确实尝试使用悬停方法更改CSS中的不透明度。。但由于某种原因，它没有起作用。也许是因为元素是使用angular应用程序加载的？如果您是从纯CSS设置悬停时的不透明度，那么它应该可以工作，angular或no；但是你需要确保你的选择器是正确的。