Нажмите не работает после добавления html с использованием ajax в интерфейсе Kendo

Question

Я работаю в пользовательском интерфейсе кендо, и у меня возникла проблема, когда я предоставляю опцию ng-click для контента HTML, который был загружен позже.

Здесь я добавляю несколько кодов, связанных с тем, что я сделал:

HTML:

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

HTML & ng-click в КРАСНОМ поле & которое работает:

<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>

При нажатии в любом из li с ng-click, предупреждение не работает.

Я также пытался добавить раздел ajax HTML непосредственно на страницу просмотра без ajax, и на этом этапе щелчок работал нормально.

Ajax:

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

Кендо / 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); внутри $scope.onClick не работает, пока мы нажимаем в разделе который загружается в ajax (например: PRT-4) для деления с классом 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
});

Пользовательский щелчок работал должным образом, как я и требовал, по той причине, что щелчок происходил только после загрузки HTML из ajax.

I Не говорите, что это правильное решение, но это моя проблема на этот раз.

Открыть для нового или правильного решения