Question

="" i want to prevent the click on a overlay button (div) that is on top of an href that is inside an ng-repeat, this is the neg repeat with the favorite-delete button on top of the

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

This is the controller section for the removal of the favorite from the list, i first make a fade-out (1sec) then fire the actual web service to remove it from the database.

$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';
                });
}

the problem is that when i click on the favorite-delete i actually removes the image from the list, it removes it from the database but directly after is loads the page with the details of the CD. how do i prevent this from happening, i tried with the stoppropagation and preventdefault but can't seem to get it working, as well as the use of a directive, could not get it to work. What do i need to do to get it to work?

I tried the add the following to userController.js

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

but also with no luck the Href link still loads and i need both

Answer 1

确定为了让它工作我必须添加$ event.stopPropagation（）; ng-click中的$ event.preventDefault（）因此最终成为了这个，感谢@WrkOnMyMachine的帮助和我正确的方向（哦，完全忽略$（文件）.ready ..... 。）这是工作版本。

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

防止点击div到基础<a href=""

1 个答案: