jQuery 在我的 HTML 页面中不起作用 [关闭]答案

【问题标题】：jQuery not working in my HTML page [closed]jQuery 在我的 HTML 页面中不起作用 [关闭]
【发布时间】：2016-05-25 20:27:06
【问题描述】：

我遇到了一个问题..

我正在使用 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>

请帮我解决这个问题。提前致谢

【问题讨论】：

你需要在你的代码中引用jquery库
确保在页面加载之前脚本不会运行。
"Thinking in AngularJS" if I have a jQuery background?的可能重复
您在控制台中看到了什么？
打开调试器并检查控制台以确保 JQuery 已加载。

标签： javascript jquery html angularjs

【解决方案1】：

而只是使用ng-change 指令：

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

并在控制器的作用域对象中添加此功能：

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

如果您已经开始使用 angularjs，那么最好保留 jquery 样式代码。 Angularjs 与 jquery 完全不同。

这是一个很好的起点。"Thinking in AngularJS" if I have a jQuery background?

【讨论】：

【解决方案2】：

当您对尚未创建的 DOM 元素使用 jQuery 时，通常会发生这种情况。

当您的网页加载时，Angular（可能）还没有启动并填充您的下拉列表。

解决方案是改用 Angular 的 ng-change。然后，当您在下拉列表中选择一个项目时，您的函数将启动。

我这里有一个例子：

Angular tutorial

在这里，每当用户选择新客户时，我都会更新客户的详细信息：

用于填充列表并在所选项目更改时调用函数的代码如下所示：

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

【讨论】：