angular + jquery在添加HTML之后无法绑定事件。

13 浏览
0 Comments

angular + jquery在添加HTML之后无法绑定事件。

我在stackoverflow上搜索了很多关于这个问题的内容，有类似的但都没有帮助，我几乎尝试了所有的方法。问题是：

我有一个应用程序，我在其中使用angular js来绑定事件，比如加载更多（分页），"添加到购物车"等等。

我没有使用路由来加载模板。这只是一个使用ng-app的grails应用程序，我通过ajax $http请求从服务器渲染模板。

当页面第一次加载时，带有模型（数据）的视图一次性显示出来，所以事件正常工作。但是当我使用$http服务加载更多数据并将其附加到当前的DOM时，事件绑定就不起作用了。甚至jquery的点击事件也不起作用。

我使用以下代码来绑定数据：

$('#itemsSpace').append($compile(response.data)($scope));

if(!$scope.$$phase) {

$scope.$apply()

}

其中response是带有HTML数据的服务器响应。

有什么猜测吗？还需要更多解释吗？

谢谢！

0

1 答案

0 Comments

问题的原因是因为在将HTML代码追加到DOM中后，AngularJS和jQuery事件没有绑定。解决方法是将事件绑定到相同的控制器，或者将事件绑定到父控制器。以下是具体的解决方法和代码示例：

var $items = $(response.data);
$('#itemsSpace').append($items);
$compile($items)($scope);

修改后的代码：

var $items = $(response.data);
$('#itemsSpace').append($items);
$compile($items)($scope);
// 将事件绑定到相同的控制器
$items.on('click', function() {
  // 处理点击事件的逻辑
  // ...
});
// 或者将事件绑定到父控制器
$('#itemsSpace').on('click', '.item', function() {
  // 处理点击事件的逻辑
  // ...
});

通过将事件绑定到相同的控制器或者将事件绑定到父控制器，可以确保在将HTML代码追加到DOM后，AngularJS和jQuery事件能够正确地绑定。这样就能够正常处理相应的点击事件了。

0