jQuery 不能处理 ng-repeat 中的按钮 id答案

【问题标题】：jQuery is not working on button id in ng-repeatjQuery 不能处理 ng-repeat 中的按钮 id
【发布时间】：2023-03-22 09:02:01
【问题描述】：

下面是我的 html 表，我在其中打印来自 XML 文件的数据，并且在对应于每个条目的状态列中，有一个使用 angularJS 指令 ng-repeat 生成的按钮。

 <div ng-app="myApp" ng-controller="myCtrl">
            <table border="1" width="100%">
                <tr>
                    <th>Employee ID</th>
                    <th>Employee Name</th>
                    <th>Status</th>
                </tr>
                <tr ng-repeat="detail in details" align="center">
                    <td>{{detail.EmployeeID}}</td>
                    <td>{{detail.EmployeeName}}</td>
                    <td>
                      <asp:Button ID="btnDelete" Text="Delete Request" runat="server" OnClick="btnDelete_Click"/>
                    </td>
                </tr>
            </table>

当我使用 ID="btnDelete" 在 ASP.net 按钮上使用 jQuery 函数时，jQuery 在 ng-repeat 中不起作用。

下面是我的 Angular JS 和 jQuery 代码。

 <script type="text/javascript">
        $(document).ready(function (e) {
            e.stopPropagation();
            $(this).children().toggleClass('active');
            $('[id$=btnDelete]').on("click", function () {
                alert("hi...");
            });
        });
    </script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http.get('myDB.xml')
            .then(function (response) {
                var x2js = new X2JS();
                //$scope.details = response.data.UserDetail;
                $scope.details = [];
                var data = x2js.xml_str2json(response.data);
                $scope.details = data.UserDetail.Detail;
            });

        });

即使我已经在 jQuery 中处理了这个问题，但仍然无法正常工作，所以请有人在这种情况下帮助我

【问题讨论】：

通常当 angular 加载到你的页面时，最好在选择 jquery 元素时使用 angular.element('item') 而不是 $()，对于 click 和其他事件函数，最好使用ng 事件属性
事实上，这可能是你的全部问题是 jquery 函数在你的 ng-repeat 运行之前运行，所以点击函数永远不会附加到元素上
为什么你不使用ng-click 指令？在这里使用asp按钮控件有什么具体原因吗？您是否也要编写服务器端按钮单击处理程序？ @Binvention 是正确的，您的 jQuery 事件未附加。
@Binvention，您能否通过演示进一步解释这一点？我可以更好地联系起来。
我将添加一个示例作为答案

标签： javascript jquery asp.net angularjs

【解决方案1】：

在使用角度分配点击功能时，您的按钮会像这样

<button ng-click="function or expression"><\button>

这将解决您的问题，即它不运行您的功能，然后在点击时删除您的 jquery，而是在您的角度设计一个功能来处理点击时。然后在 ng-click 属性中引用该函数。 ng-click 周围的特定标签无关紧要，因为它受到所有 angular 标签的支持。如需更完整的 ng-click 示例，请转到 to the angular website

【讨论】：

【解决方案2】：

如果你想 Jquery 将 <asp:Button ID="btnDelete" 更改为 <asp:Button class="btnDelete" 你应该更改为 class 因为 ID 是 unique，它在 ng-repeat 中不起作用。您的 Jquery 将如下所示：

$(".btnDelete").on("点击", function () { 警报（“嗨……”）； });
建议：应该使用angular的ng-click事件

示例：

HTML

 <input type="button" value="Click Me" ng-click="Addone()" />

AngularJs

 <script>  
   angular.module('MyForm', [])  
       .controller('myController', ['$scope', function($scope) {  
  $scope.count = 0; 
  $scope.Addone = function () {  
     $scope.count++;  
   };  
        }]);  
 </script>

您可以为您的代码创建“btnDelete_Click”函数，而不是我的示例代码中的“Addone”

查看更多event ng-click in angularjs

【讨论】：