Question

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

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

当我将HTML元素硬编码到index.html doc中时，它起了作用，但是当我从模板中导入元素时却没有。

以下模板：

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

但是，正如评论所示，如果您正在处理Angular项目，最好使用Angular的等效项。

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

＆＃13;

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

＆＃13;

.deleteButton {
  opacity: 0.5;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: