javascript - ajax回调中的闭包循环

Question

我有一个从json解析的数据，我将数据显示在一个像facebook的 friend 建议框一样的框中。我希望当用户单击任何建议的用户时，通过ajax添加到数据库的请求及其相应的按钮消失，一切正常，除了最后一件事(按钮消失)而不是列表中的第一个按钮消失，当我寻找问题的解决方案时，我遇到了一种称为闭包的东西但是我真的不知道如何在我的代码中实现它，当我尝试声明监听器匿名函数时出现了另一个问题在循环内部，数据被多次插入数据库(因为它在循环内)，我知道这可能看起来是重复的问题，但我只需要有人指出我声明内部函数的正确位置，

我的代码看起来像这样

$(document).ready(function() {
    var suggest = new XMLHttpRequest();
    suggest.onreadystatechange = function() {
        if (suggest.readyState === 4 && suggest.status === 200) {
            var susers = JSON.parse(suggest.responseText);

            for (var i = 0; i < susers.length; i += 1) {
                var sphoto = '<div class="col-md-4 text-left  "> <div id="fimage">';
                sphoto += '<img  width="50" height="50" src="user/';
                sphoto += susers[i].activation + '/' + susers[i].pic + '"> </div>   </div>';
                var sname = '<div id="fname">' + susers[i].name + '</div>';

                // here is the form im targetting to pull informtion from
                var hidden = '<form id="fform"><input id="fnameh" name="name" type="hidden" value="' + susers[i].name + '" >';
                hidden += '<input name="id" type="hidden" value="' + susers[i].id + '" >';

                var fbutton = '<button  id="addfriend"class="btn btn-info  btn-xs pull-right text-center" type="submit" >Follow <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span> </button></form';


                var display = document.getElementById('fsuggest');
                display.innerHTML += '<div class="scroller"><div id="fspace" > <button  type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + sphoto + sname + hidden + fbutton +'</div></div>'

                $('#addfriend').live('click', function(arg) {
                    return function() {
                        arg.preventDefault();
                        var data = $('#fform').serialize();
                        $.ajax({
                            data: data,
                            type: "post",
                            url: "addnew.php",
                            success: function(data) {
                             //make the text area empty
                              $('#addfriend').css("display", "none");
                                console.log(data);
                            }

                        }); // end of $.ajax

                    }(i); // end of inner function

                }); // end of click listner 



            } //end of for loop

       }
    };

    suggest.open('GET', 'box.php');
    suggest.send();
}); // end of JQUERY ready

Answer 1

我不确定为什么你需要在这里closure。问题似乎出在具有相同 id 的多个表单和按钮。

所有这些按钮都有相同的id，因此表单。所以

$('#addfriend').live('click', function(arg) {..}) has no reference to the particular button 

希望这一改变能有所帮助

将i的值与表单的id相连接，并为按钮添加属性data-id=i。

在按钮旁边添加类addfriend而不是id。因此，当单击此按钮时，将获取 data-id 值。使用此值获取带有 id 的相关表单，并序列化该表单

var hidden = '<form id="fform_' + i + '"><input id="fnameh" name="name" type="hidden" value="' + susers[i].name + '" >';
hidden += '<input name="id" type="hidden" value="' + susers[i].id + '" >';


var fbutton = '<button data-id="' + i + '" id=""class=" addfriend btn btn-info  btn-xs pull-right text-center" type="submit" >Follow <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span> </button>';

对点击功能进行以下更改。

在循环内添加事件处理程序的原因尚不清楚。

 $('.addfriend').live('click', function(arg) {
           arg.preventDefault();
           var getDataId = $(this).attr('data-id')  // get the data-id
            var data = $('#fform_'+getDataId).serialize(); // get relevant form
            $.ajax({
              // rest of code
           }); // end of $.ajax
           })

尝试使用jquery 1.9以上版本使用on方法进行事件委托(delegate)