JQuery selectors not working in angularjs?

Question

I'm having trouble accessing elements on an angularjs rendered page. Even a simple script to popup an alert.

Here's my code:

<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>

your missing the point of angularjs here... you should not use jquery selectors to perform this kind of task. try reading more about angular (www.learn-angular.org) — Fernando Pinheiro
– Fernando Pinheiro, Commented Oct 11, 2015 at 19:19
Appreciate the suggestion, Fernando. I've looked at learn-angular and do not see where it specifically addresses my issue. Is there a particular section you are suggesting I can find the answer? — crowsfeet
– crowsfeet, Commented Oct 11, 2015 at 19:45

buzzsaw · Accepted Answer · 2015-10-11 20:04:00Z

If you are attempting to do any DOM manipulation after the view has been compiled, you should use a directive. If you are just wanting to register a click event to fire a function, use ng-click. Here are examples of both for you to check out.

HTML from your example (updated to use generic object and to handle both examples):

    <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>

--Related Directive Code--

Controller code to create the test object for ng-repeat:

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

Directive to handle click event

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

--Related ng-click Code--

This function in your controller will be called from ng-click in the HTML

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

Here is a fiddle showing this in action: http://jsfiddle.net/wpwelch/L3gq0etL/

Skatch · Accepted Answer · 2015-10-11 19:54:27Z

0

This occurs because you are trying to assign an event on an object that was not yet created. I can think of two solutions at the moment:

Try binding the event with ngClick and a $scope function. You can use jQuery inside angular freely if you need it afterwards.
Another way is to create a repeat-buffer directive that would wait for the repeat to finish, and then fire a repeat-finished event that you can hear in your angular controller, and then perform your jQuery code.

Hope it helps.

edited Oct 11, 2015 at 19:54

answered Oct 11, 2015 at 19:49

Skatch

2,3222 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

JQuery selectors not working in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related