jQuery not working in my HTML page

Question

I am stuck with an issue ..

I am using AngularJS and 'have included jQuery in it which is not working in HTML page. Why does this happen?

$('#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>

Please help me with this. Thanks in advance

Possible duplicate of ["Thinking in AngularJS" if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Vucko, May 25 '16 at 12:19
Open the debugger and check the console to make sure JQuery is loaded. — Mike Feltman, May 25 '16 at 12:20

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Instead just use ng-change directive:

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

and in your controller's scope object add this funciton:

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

If you have started with angularjs then its better to leave the jquery style code. Angularjs is way different than jquery.

This is good starting point."Thinking in AngularJS" if I have a jQuery background?

score 0 · Answer 2 · answered May 25 '16 at 12:23

This often happens when you use jQuery against DOM elements which haven't been created yet.

When your webpage loads, the Angular (probably) won't have kicked in, and populated your drop down list yet.

The solution is to use Angular's ng-change instead. Then, your function will get kicked off when you select an item in your drop down list.

I have an example of this here:

Angular tutorial

Here, I update the customer's details whenever the user selects a new customer:

The code, to populate the list, and call a function when the selected item changes, looks like this:

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

jQuery not working in my HTML page

2 Answers2