0

I'm quite puzzled at how this happened. Before I switched this page's code to be an angular generated view this was not an issue so I know this has something to do with that. The issue comes from clicking an a tag that normally would trigger a function in jquery on it that would obviously first prevent the default behavior. However now the function is never called. Here's the code

     <div id="pagingarea" ng-show="maxpage>1">

   <a href="previ" id="first" class="btn btn-info btn-small" ng-show="maxpage>1" ng-click="setpage(1)"><<</a> 
   <a href="previ" id="prev" class="btn btn-info btn-small" ng-click="setpage(currentpage-1)" ng-show="maxpage>1"><</a>    

 <span id="pagerow" ng-show="maxpage>30">
  <a href="prev" id="PrevLink" class="npbtns" >Previous 30</a> 
 <a href="nex" id="NextLink" class="npbtns" >Next 30</a></span>


     <div id="nums">

     <ul class="pagenav" id="pdet">
    <li ng-repeat="p in [maxpage]| forclassic">
      <a href="{{$index+1}}" id="page{{$index+1}}" class="page p30in{{floor($index, 30)+1}}  {{($index>30)? 'hide':''}} {{($index==0)?'currentpage':''}}" ng-click="setpage($index+1)" >{{$index+1}}</a>
     </li>
</ul>


         </div>

      <a href="next"class="btn btn-info btn-small" id="next" ng-click="setpage(currentpage+1)" ng-show="maxpage>1">></a> 
          <a href="last"class="btn btn-info btn-small" id="last" ng-click="setpage(maxpage)" ng-show="maxpage>1">>></a> 
     </div>
          </div>

Since the issue is not related to any angular code in the controller let us assume that that is not needed to be shown. The jquery is here

  $("#pagingarea a").click(function (e) {
  e.preventDefault(); // works in all browsers but chrome
 }

As you can see my code is set up to match what the jquery selector needs to pick it up. The end result looks as it should, just a container of page numbers that upon clicking would effect something else on the page and it does so on all but chrome.

The only thing that I could gather about this is that perhaps the elements are viewed differently in chrome. However the debug data clearly says that its being generated as it should be.

EDIT: for those curious the ng-repeat I'm using is modified to use [x] in place of a collection so it can mimic a for loop rather than the foreach in this specific scenario. Created by this cool person

Community
  • 1
  • 1
Ashton OldEra Turner
  • 3
  • 2
  • place `ng-click="$event.preventDefault()"` on those anchor tags – Pankaj Parkar Feb 25 '15 at 17:58
  • Even if I did that the jquery function would not pick it up. There's a lot more that that being done here but I didn't include it because its irrelevant to the problem. – Ashton OldEra Turner Feb 25 '15 at 18:03
  • should be running your jQuery code from inside a directive in which case you would be using `element.on('click','a'....`. you are just asking for problems if you run jQuery code and angular independently – charlietfl Feb 25 '15 at 19:05

1 Answers1

0

this should do it:

$("#pagingarea").on('click','a', function (e) {
  e.preventDefault();
  alert('hello world!');
})
simon
  • 526
  • 4
  • 8