JQuery functions not working with ng-repeat
I use to repeat some that show a list of entries. ng-repeat
div
Problem: I want the popup to be open when clicking on the entry. works fine, but the problem is the jQuery click event doesn't work for the element inside . ng-repeat
ng-repeat
HTML code:
<div data-ng-controller="AlbumCtrl">
<div data-ng-repeat="z in songInfo">
<div data-ng-repeat="b in z.tracks">
<div class="border-bottom clearfix">
<ul class="social-icon">
<li class="share-popup"><a class="share-song-icon"></a>
<ul class="popup">
<li><a class="share-facebook">Facebook</a></li>
<li class="last"><a class="save">Twitter</a></li>
<div class="cancel"><a>Cancel</a></div>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
JQuery:
$('.share-popup').click(function(e) {
e.stopPropagation();
$(this).children().toggleClass('active');
});
The click event works fine when I set the div out . jQuery
ng-repeat
Any help would be greatly appreciated. Thank.
source to share
The task ng-repeat
renders all divs dynamically and you bind the jQuery event at the beginning, at that time the class element was share-popup
not rendered in the DOM, so this event is not bound to that element, you need to write your own custom directive that will constrain the class, and at that time as a class element will be displayed in the DOM, this directive link
will be fired and the event will be bound.
Directive
app.directive('sharePopup', function(){
return{
restrict: 'C',
link: function(scope, element, attrs){
element.on('click', function(e){
e.stopPropagation();
element.children().toggleClass('active');
})
}
}
})
The best solution would be to use ng-class
inside your element, which will make more difference if you code over angular. Then you don't need to write external Javascript code that will handle the UI itself.
Markup
<div class="border-bottom clearfix">
<ul class="social-icon">
<li class="share-popup" ng-click="b.active!=b.active; $event.stopPropagation();">
<a class="share-song-icon" ng-class="{active: b.active}"></a>
<ul class="popup">
<li><a class="share-facebook">Facebook</a></li>
<li class="last"><a class="save">Twitter</a></li>
<div class="cancel"><a>Cancel</a></div>
</ul>
</li>
</ul>
</div>
source to share
The problem is that you are binding the event before the template has been drawn.
This is a common problem that anyone working with angular faces. You should either use ng-click or if you want to use jQuery then update your code with
$('.share-popup').on("click", function(e)
{
e.stopPropagation();
$(this).children().toggleClass('active');
});
source to share