JQuery не работает в моей HTML странице

Question

я застрял с проблемой ..

Я использую AngularJS и «включили JQuery в нем, который не работает в HTML-страницы. Почему это происходит?

$('#setting').change(function() { 
 
    alert("hi"); 
 
});

<div class="content table-responsive table-full-width"> 
 
    <table class="table table-hover table-striped"> 
 
    <thead> 
 
     <th>Settings</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <select id="setting" class="form-control"> 
 
      <option>---Select---</option> 
 
      <option ng-repeat="item in settings" value="{{item.id}}">{{item.name}}</option> 
 
      </select> 
 
      <div id="btn" class="col-md-12" style="margin-top: 16px;"> 
 
      <input type="button" name="Activate" value="Activate" /> 
 
      <input type="button" name="Deactivate" value="Deactivate" /> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Пожалуйста, помогите мне с этим. Заранее спасибо

Answer 1

Вместо просто использовать ng-change директиву:

<select id="setting" class="form-control" ng-change='functionToCall()'> 

и объекта области видимости вашего контроллера добавить Funciton:

$scope.functionToCall = function(){ 
    alert('hi'); 
}; 

---

Если вы начали с angularjs, то его лучше оставьте код стиля jquery. Angularjs отличается от jquery.

Это хорошая отправная точка. "Thinking in AngularJS" if I have a jQuery background?

Answer 2

Это часто случается, когда вы используете jQuery для элементов DOM, которые еще не созданы.

Когда ваша страница загружается, Угловая (вероятно) не будет пинать и еще заполнить свой выпадающий список.

Решение заключается в использовании Angular's ng-change. Затем ваша функция будет вызывать, когда вы выберете элемент в раскрывающемся списке.

У меня есть пример этого здесь:

Angular tutorial

Здесь я обновляю детали клиента всякий раз, когда пользователь выбирает новый клиент:

Код, для заполнения список и вызвать функцию при изменении выбранного элемента, выглядит так:

<select ng-model="selectedCustomer" 
     ng-change="loadOrders();" 
     ng-options="customer as customer.CompanyName for customer in listOfCustomers" > 
    </select>