当我进行角度调用时，jquery fadeOut 只工作一次？

Question

我知道他们有很多与此类似的问题，但我会非常具体。我的 jquery 脚本只工作一次，之后我得到这个错误

angular.min.js:108 DELETE http://localhost:8080/todo/20 500 (Internal Server Error)

但它会在刷新时删除我的帖子。所以角度脚本正在工作，所以我猜它是我的 jquery 脚本

ma​​in.js

var app = angular.module('john',[]);

app.controller('myCtrl', function($scope, $http, $location){

$scope.deleteTask = function(id){

    $http.delete('/todo/' + id).then(function(data, response, status, headers, config){
            $http.delete('/todo/' + id);
            $scope.activePath = $location.path('/');
            console.log("it deleted");
        }, function(rejection){
            console.log("some error");
        });
    }


$scope.addTask = function(taskdata){


    $http.post('/todo', taskdata).then(function(response){
        // taskdata.task = '';
        console.log("it works");
    }, function(rejection){
        console.log("it didn't work");
    });


}


});
    $('#disappear').click(function(e){
        e.preventDefault();
        $('#gone').fadeOut(1000, function(){
            $(this).remove();
        });



    });

这是它的html代码

<div id="gone" class="myl" ng-controller="myCtrl">
    <li><h4>{{ task.task}}</h4></li>
    <small style="font-style:italic">{{task.created_at |date("m/d/Y")}}</small></br>

<button id="disappear" class="btn btn-sm btn-danger" ng-click="deleteTask({{task.id}})">Delete</button>
    </div>

Answer 1

由于您使用的是 Jquery 标记 ID 选择器#disappear #gone，因此 JQuery 事件只会附加一次。这意味着它只会工作一次。

$http.delete 调用成功时执行fadeOut：

$http.delete('/todo/' + id).then(function(data, response, status, headers, config){
  $( 'task' + id ).fadeOut(1000, function(){
            $(this).remove();
        });

为此，在我们的 HTML 中，我们需要为我们的任务 div 分配一个唯一的 id：

<div id="task{{task.id}}" class="myl" ng-controller="myCtrl">...