Question

我编辑了我的代码，只提取了所需的部分，使这个问题更容易理解。整个代码很大，因为它是现有系统的副本，并且会有太多代码需要通读。

所以 - 简而言之，我有一个网页，我使用jQuery hover（）和jQueryContextMenu plugin。

我的HTML页面看起来像这样：

<?php
foreach($characters as $character) {
  echo "<div class='player'>";
    echo "<div>". $character->name. "</div>"; //other character attributes
  echo "</div>";
}
?>

我的悬停功能如下所示：

$('.player').hover(
    function(){
        $(this).addClass('hovering');
        alert("Class added");
    },
    function(){
        $(this).removeClass('hovering');
        alert("Class removed")
    }
);

这曾经很好用。我现在正在学习Angular，我决定使用AngularJS更改我的HTML：

<div ng-controller="playerController">
  <div class='player' ng-repeat="character in characters">
      <div>{{character.name}}</div> //..and other character attributes
  </div>
</div>

我还有一个playerController从我的php后端获取数据并将其转换为Angular消耗的JSON。

所有这一切都很好。我得到了播放器列表，我的上下文菜单也可以正常工作，我可以右键单击并执行操作。

仅我的hover()功能不起作用！如果我执行console.log($('.player').length)，则会打印0。上下文菜单插件也绑定到同一个类，但它可以正常工作：

$.contextMenu({
    selector: '.player',
    trigger: 'right',
    ... other options

我读到这可能是因为我必须bind事件，因为DOM元素是由Angular构建的。所以我尝试了以下两个步骤也没有任何运气（我尝试click事件进行测试，以简化：

$(document).bind("click",".player",function(){alert("hi")});

$(document).on("click",".player",function(){alert("hi")});

我尝试了各种变体：

$('.player').bind("click",function(){alert("hi")});

$('.player').on("click",function(){alert("hi")});

我在jQuery的ready()函数中尝试了所有这些但是没有用。（没有显示警报）。

最后，我将这两个语句包装在一个名为jQueryInit()的函数中，我尝试从AngularJS触发这两个函数，如下所示：

playerController:
... //other lines of code
$scope.$on('$viewContentLoaded', jqueryInit);

但那也没有用。所以我在这里，希望有人能告诉我这里发生了什么，因为我现在几乎无能为力......

jQuery悬停不适用于AngularJS

0 个答案: