html 在 Kendo UI 中使用 ajax 追加后单击不起作用

Question

我在 kendo UI 工作，我在为稍后加载的 HTML 内容提供 ng-click 选项时遇到问题。

这里我添加了一些与我所做的相关的代码：

HTML:

<div ng-controller="KendoCtrl">
  <div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>

HTML & ng-click in RED box & which is working:

<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
  <span>Total Open</span>
  <span>0</span>
</div>

HTML & ng-click in ajax HTML & 这不起作用：

<ul>
  <li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
  <li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
  <li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
  <li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>

单击任何包含 ng-click 的 li 时，警报不起作用。

我也尝试过将 ajax HTML 部分直接添加到我的视图页面而没有 ajax，此时点击工作正常。

Ajax:

$('body').on('change', '#dropdown_id', function(){
  $.post('controller/htmlsection', {'id': $this.val()}, function(data) {
    $('.show_html_here').html(data.html);
  });
});

Kendo/Angular 代码：

angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
  ...
  $scope.onClick = function(param) {
    alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
  }
  ...
});

alert(param); inside $scope.onClick 当我们点击加载到 ajax（例如：PRT-4）到 div 的部分时，class show_html_here。我认为这是因为 ajax 部分稍后加载 Kendo/Angular 代码的原因。如果你知道一些解决方案，请帮助我。

Answer 1

我没有从 Stack 获得解决方案，需要找到解决我的问题的方法。我找到了问题的解决方案，不知道它是否正确，但它解决了我的问题。

HTML更新：

<ul>
  <li class="customFilter" ng-model="stageFilter">PRT - 1</li>
  <li class="customFilter" ng-model="stageFilter">PRT - 2</li>
  <li class="customFilter" ng-model="stageFilter">PRT - 3</li>
  <li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>

Kendo/Angular 代码：

// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    active = 0;
  } else {
    $(this).addClass('active');
    active = 1;
  }
  $scope.onClick('stageFilter', active); // Click was working as required
});

自定义点击按我的要求正常工作，因为点击仅在 ajax 中的 HTML 加载后发生。

我不是说这个解决方案是正确的方法，但这是我这次的问题。

接受新的或适当的解决方案

html 在 Kendo UI 中使用 ajax 追加后单击不起作用

Click not working after html append using ajax in Kendo UI

ajax

kendo-ui

kendo-grid

angularjs-ng-click