verhindern auf div klicken zu Grunde liegenden <a href

Question

ich den Klick auf einer Overlay-Taste verhindern will (div), die auf der Oberseite eines href ist, die innerhalb einer ng-Repeat ist, ist dies die neg Wiederholung mit dem Lieblings-löschen Taste auf der Oberseite der

<div style="margin-top:110px;" id="favoritecdlist" ng-controller="UserController"> 
    <div class="cdscrollcontainer" ng-repeat="cd in favoriteCds"> 
      <a href="~/cd/{{cd.id_cd}}" class="cdscrollcell" id="{{cd.id_program}}"> 
       <div class="favorite-delete" ng-click="RemoveCDFromFavoriteList(cd.id_cd)">x</div> 
       <img class="cdimage" ng-src="{{cd.url}}"> 
       <div class="cdimagebackground"> 
       <div class="cdtitle">{{cd.cdName}} ({{cd.ReleaseYear}})</div> 
       </div> 
      </a> 
    </div> 
</div> 

Dies ist der Steuerungsabschnitt für die Entfernung des Favoriten aus der Liste, ich zum ersten Mal eines Fade-out (1 S), dann den eigentlichen Web-Service aus der Datenbank zu entfernen, Feuer machen.

$scope.RemoveCDFromFavoriteList = function (id_cd) { 
     $('#' + id_cd + '').css("opacity", "0").css("transition-duration", "1s"); 

      $http({ 
       method: 'get', 
       url: "/User/RemoveUserFavoriteCD?id_cd=" + id_cd, 
      }) 
       .success(function (data) { 
        $('#' + id_cd + '').css('display', 'none'); 
       }).error(function (data) { 
        $scope.message = 'Unexpected Error'; 
       }); 
} 

das Problem ist, dass, wenn ich auf der Schaltfläche Favoriten-lösche ich tatsächlich das Bild aus der Liste entfernt, es aus der Datenbank entfernt, sondern direkt nach lädt wird die Seite mit den Details der CD. Wie kann ich das verhindern, ich habe versucht mit der stoppropagation und preventdefault, aber es scheint nicht zu funktionieren, sowie die Verwendung einer Direktive, konnte es nicht zum Laufen bringen. Was muss ich tun, damit es funktioniert?

habe ich versucht, die fügen Sie folgendes zu userController.js

$(document).ready(function(){ 
     $('favorite-delete').on('click', function(event){ 
      event.preventDefault(); 
     }) 
    }) 

aber auch ohne Glück der HREF-Link noch Lasten und ich brauche beide

Answer 1

ok, um es ich musste zur Arbeit zu kommen füge die $ event.stopPropagation() hinzu; und die $ event.preventDefault() in der ng-klicken, so wurde es schließlich als dies, danke @WrkOnMyMachine für die Hilfe und mir in die richtige Richtung (oh und ignorieren Sie das $ (Dokument) .ready ..... .) das ist die Arbeitsversion.

<div style="margin-top:110px;" id="favoritecdlist" ng-controller="UserController"> 
<div class="cdscrollcontainer" ng-repeat="cd in favoriteCds"> 
     <a href="~/cd/{{cd.id_cd}}" class="cdscrollcell" id="{{cd.id_program}}"> 
      <div class="favorite-delete" ng-click="RemoveCDFromFavoriteList(cd.id_cd); $event.stopPropagation(); $event.preventDefault()">x</div> 
      <img class="cdimage" ng-src="{{cd.url}}"> 
      <div class="cdimagebackground"> 
      <div class="cdtitle">{{cd.cdName}} ({{cd.ReleaseYear}})</div> 
      </div> 
     </a> 
</div>