通过 HTTP 请求加载的元素的角度单击事件不起作用

angular click event for element loaded via http request not works

本文关键字：单击 事件 不起作用 元素 HTTP 请求 加载 通过      更新时间：2023-09-26

codepen link ： http://codepen.io/gauravcoder/pen/vLWEjJ?editors=101我是 Angular JS 的新手

我有点击的项目，我现在发出警报，它工作正常，问题是当通过 http 请求加载项目时，单击事件不起作用。

HTML代码：（前两个非AJAX项目的警报仅在通过ajax调用加载的其他项目不起作用的情况下有效）

<ion-list>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div ng-repeat="item in items" style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item Ajax Call: {{ item.username }}
    </div>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>

JS代码 

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
    $("div#clickit").click(function() {
        alert('hey');
    });

    $scope.noMoreItemsAvailable = false;
    $scope.currentPage = 0;
    $scope.loadMore = function() {
        $http.get('http://mourjewels.com/www/stones2.php?page='+$scope.currentPage).success(function(items) { 
            $scope.currentPage += 1;
            $scope.items = $scope.items.concat(items.data);
            console.log(items.count);
            $loopcount =  Math.ceil(items.count/10);
            console.log($loopcount);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            if($scope.currentPage >= $loopcount){
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $scope.noMoreItemsAvailable = true;
            }
        });
      };
      $scope.items = [];
});

这是因为 Angular 在将 AJAX 加载的元素注入到 DOM 之前执行控制器脚本。

无论如何，在 Angular 中肯定有一种不同的方法。您可以使用 Angular 的 ng-click 指令。

在您的控制器中，

$scope.doSomething = function () {
    // Does something
};

在您的 HTML 中， 

<div ng-click="doSomething()"></div>

像ng-repeat这样的东西，ng-click在Angular中被称为指令，只是对原生DOM的自定义扩展。 ng-前缀指令都包含 Angular 核心。每次 AngularJS 更新 DOM 时，它都会收集 DOM 中存在的指令并执行指令。因此，在您的情况下，将执行ng-repeat和ng-click指令。 ng-click基本上注册 onclick DOM 事件处理程序以在当前范围内执行给定的函数 （doSomething）。因此，无论如何或何时注入 DOM，它都会起作用。

当然，解释非常简化。但我希望这对你有意义:)

相关文章：