jQuery和AngularJS：将事件绑定到不断变化的DOM

一尘不染

jQuery和AngularJS：将事件绑定到不断变化的DOM

angularjs

在AngularJS的DOM中，我在ng-repeat指令中使用ng-
include。它可以很好地加载HTML。无论如何，我遇到的一个问题是我正在使用JQuery（最新版本）将DOM中元素上的一些鼠标悬停和鼠标单击事件绑定到与ng-
repeat和include添加到DOM上的类相同的类。不过，JQuery似乎并未将事件处理程序应用于新添加的DOM。

在以前的版本中，.live（）似乎可以满足我的要求，但是在最新版本中已将其删除。我是否应该清除元素上的绑定并在DOM每次添加类的其他元素时重新创建它们？

阅读 288

2020-07-04

共1个答案

一尘不染

在这里回答：

这是一个多方面的问题。首先，所有jQuery代码事件都应使用$ scope。$ apply来按预期方式执行angularjs代码。例：

jQuery(selector).someEvent(function(){
    $scope.$apply(function(){
      // perform any model changes or method invocations here on angular app.
    });
});

在最新版本的jQuery中，为了使事件根据DOM更改而更新，您需要1.为最近的父元素（例如）获取选择器：

<div class="myDiv">
<div class="myDynamicDiv">
</div>
<!-- Expect that more "myDynamicDiv" will be added here -->
</div>

在这种情况下，您的父选择器将是“ .myDiv”，而您的子选择器将是.myDynamicDiv。

因此，您希望jQuery在元素的PARENT上具有事件，因此，如果子元素发生更改，它将仍然有效：

$('.myDiv').on("click", ".myDynamicDiv", function(e){
      $(this).slideToggle(500);
      $scope.$apply(function(){
           $scope.myAngularVariable = !$scope.myAngularVariable;
      });
});

注意，使用$ scope。$ apply（）是为了使jQuery能够访问那些角度变量。

希望这可以帮助！基督教

2020-07-04