Question

我正在开发一个angular-node.js应用程序，其中我有一个按钮，单击该按钮会触发发布请求。我面临一个奇怪的问题，即这个帖子请求被称为按钮被点击的次数。例如，如果我第一次单击按钮 - 发布请求被调用一次，如果我再次单击，这是第二次发布请求执行两次，依此类推。我无能为力代码有什么问题，这是我的代码：

angular.js：

$scope.addActivity = function(actor){

    AJS.dialog2("#impact-dialog").show();

    $(".dialog-close-button-impact").click(function(e) {
        //e.preventDefault();
        AJS.dialog2("#impact-dialog").hide();
    });

    var countClicks = 0;
    $(".SubmitImpact").click(function(e) {

        e.preventDefault();


        alert("I am being called again and again");
        countClicks++;
        alert(countClicks);
        AJS.dialog2("#impact-dialog").hide();

        var data = {
            productName: $scope.productName,
            actor: actor,
            activity : $('#activity').val(),
            checked: false
        };

        console.log("Input data for add impact" + actor)

        $http.post('/addActivity', data)
            .success(function(data){
                $scope.data = data;
                $scope.activities = [];

                for (var activity in data) {

                    $scope.activities.push({
                        text: data[activity].activity,
                        id: data[activity].actor,
                        checked: data[activity].checked
                    });
                }
                actor = "";


            }).error(function(data){
                console.log('Error in adding activity' + data)
            });

    });

};

node.js代码：

app.post('/addActivity',function(req, res) {

    console.log("I am going to add activity");

    console.log("Checked value:" +req.body.checked)

    impactMapActivity.create(
        {productName: req.body.productName,
            checked: req.body.checked,
            actor: req.body.actor,
            activity: req.body.activity

        }, function(err,data){
            if (err)
            //{
                res.send(err);
            console.log(err);

            impactMapActivity.find({
                productName : req.body.productName
            }, function(err, data) {
                if (err)
                    res.send(err);

                console.log("Printing Data" + data)
                res.json(data);
            });
        }
    );

});

模板代码：

<span><button class=" aui-button dialog-show-button-impact div.actor-\{{$index}}"  style="float: left" title="$i18n.getText('add.activity')"
                                                                            ng-click="addActivity(actor.id)"><span class="aui-icon aui-icon-small aui-iconfont-add">Add</span>
                                                            </button>\{{actor.id}}</span>

按照建议删除jquery后

更新代码：

$scope.addActivity = function(actor){

        AP.require('dialog', function(dialog){
            dialog.create({
                key: 'activity-content',
                width: '40%',
                height: '30%',
                chrome: true,

            });
        });

        AP.require('events', function(events){
            events.on('customEvent', function(){
                console.log(arguments[0]);
                var data = {
                    productName: $scope.productName,
                    actor: actor,
                    activity : arguments[0],
                    checked: false
                };

                $http.post('/addActivity', data)
                    .success(function(data){
                        $scope.data = data;
                        $scope.activities = [];

                        for (var activity in data) {

                            $scope.activities.push({
                                text: data[activity].activity,
                                id: data[activity].actor,
                                checked: data[activity].checked
                            });
                        }

                        actor = "";

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.success('','Activity added');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });


                    }).error(function(data){

                        AP.require("messages", function(messages){
                            //create a message
                            var message = messages.error('','Error in Adding Activity');
                            setTimeout(function(){
                                messages.clear(message);
                            }, 2000);
                        });
                    });
            });
        });

    };

但我仍面临同样的问题。

Answer 1

请尝试如下所示。

$(".SubmitImpact").one("click", function () {

    //alert("This will be clicked only once.");

});

.one()

Answer 2

问题是addActivity函数每次调用时都在调用.click处理程序。因此，在第二次单击时，有两个.click处理程序附加到元素。

有几种解决方法：

在Angular中重构代码并使用ng-click（不可能）
仅添加一次点击处理程序。这将涉及将点击处理程序移到addActivity函数之外。（最好的方式）
使用jQuery.one（按照Sampath的建议）。
使用name-spaced jQuery events。

重构后，代码应如下所示：

AP.require('events', function(events){
    // ...
});


$scope.addActivity = function(actor){
  AP.require('dialog', function(dialog){
      // ...
  });
});

为什么ng-click被称为单击按钮的次数？

2 个答案: