JQuery 选择器在 angularjs 中不起作用？

Question

我在访问 angularjs 呈现页面上的元素时遇到问题。即使是弹出警报的简单脚本。

这是我的代码：

<div class="col-md-10 col-md-offset-1">
<div>
    <table class="table  table-striped">
        <thead> 
            <th>From File</th>
            <th>Map To</th>
        </thead>
        <tr class="selector-row" ng-repeat="(key,value) in import">
            <td><span id="myspan">{{value}}</span></td>
            <td style="padding:10px;">
                <select name="repeatSelect" id="repeatSelect" ng-model="data" class="form-control">
                    <option ng-repeat="(key,value) in mapping" value="{{value}}">{{value}}</option>
                </select>
            </td>
        </tr>
    </table>

</div>

<script>
    $(document).ready(function () {
        $('#myspan').on('click', function () {
            alert('hit it')
        })
    })
</script>

Answer 1

发生这种情况是因为您试图在尚未创建的对象上分配事件。目前我能想到两种解决方案：

尝试将事件与 ngClick 和 $scope 函数绑定。 angular里面的jQuery以后需要的话可以随意使用
另一种方法是创建一个 repeat-buffer directive 等待重复完成，然后触发 repeat-finished 事件您可以在 angular 控制器中听到，然后执行您的 jQuery 代码。

希望对您有所帮助。

Answer 2

如果您试图在编译视图后进行任何 DOM 操作，您应该使用指令。如果你只是想注册一个点击事件来触发一个功能，使用 ng-click。以下是两者的示例供您查看。

HTML 来自您的示例（更新为使用通用对象并处理这两个示例）：

    <table class="table  table-striped">
            <thead> 
                <th>Directive Click</th>
                <th>ng-click</th>
            </thead>
            <tr class="selector-row" ng-repeat="data in import">
<!-- This td holds the HTML for the directive example code -->
                <td><span id="myspan" generate-click-response="">{{data.id}}</span></td>
<!-- This td holds the HTML for the ng-click example code -->
                <td id="secondSpan" style="padding:10px;" data-ng-click="alertFunction(data)">
                   {{data.name}}
                </td>
            </tr>
        </table>

--相关指令代码--

为 ng-repeat 创建测试对象的控制器代码：

$scope.import = [
             {"id": "1", "name":"first"},
             {"id": "2", "name":"second"},
             {"id": "3", "name":"third"},
             {"id": "4", "name":"fourth"},
             {"id": "5", "name":"fifth"}
         ];

处理点击事件的指令

myApp.directive('generateClickResponse', function() {
    return {
        link: function(scope, element, attribute) {
          element.bind("click", function(e) {
              alert("element clicked: " + element.attr('id'));
          });
          }
        }
    });

--相关ng-click代码--

控制器中的这个函数将在 HTML

中从 ng-click 调用

$scope.alertFunction = function(element) {
             alert("ng-click heard click. Passing data key id = " + element.id);   
        }

这里有一个 fiddle 展示了这个动作：http://jsfiddle.net/wpwelch/L3gq0etL/

JQuery 选择器在 angularjs 中不起作用？

JQuery selectors not working in angularjs?

jquery

jquery-selectors

angularjs