JQuery for循环卡在最后一个索引[重复]答案

【问题标题】：JQuery for loop stuck at last index [duplicate]JQuery for循环卡在最后一个索引[重复]
【发布时间】：2013-08-28 18:52:37
【问题描述】：

我有将标签附加到 html 的函数 process_row，并且这些标签在单击时链接到一个函数。（在这种情况下，只需 alert(i)，它在结果数组中的位置）。

但是，在被点击时，新生成的警报会提示整个结果数组的长度。我已经尝试了很多很多改变来尝试让它工作，但它没有。

你真奇怪，fab_div.attr("id", result_data[0]);工作正常！！在 Chrome 检查元素中，id 标签按原样显示，但 click 函数将所有内容指向数组中的最后一个元素。

例如，如果我这样做，fab_div.click(function () { alert(result_data[0]) });，我会得到数组中最后一个元素的名称，与单击哪个元素无关。

谁能给我解释一下...为什么？

我认为这可能与 $("<div>") 有关，其中 JQuery 认为它与它分配的 div 相同。有没有办法解决？ 's 是动态生成的，我不想让 PHP 做回显。此外，内容可能会实时更新。

示例数据集：

Smith_Jones#Smith#Jones@janet_Moore#Janet#Moore@Andrew_Wilson#Andrew#Wilson

经过很多很多的更改，仍然无法正常工作：

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        

        result_data =result_array[0].split("#");        

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>");
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            fab_div.append(fab_text)
            // fab_div.click(function () { alert(i) }); 
            // ^ not working, try appending list of id's to id_list
            id_list.push(result_data[0])
            $('#ls_admin').append(fab_div)      
        }           

        for(j = 0; j < id_list.length; j++){
            $('#' + id_list[j]).click(function () { alert(j) })
        }               
    }
}

最初的尝试：

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        

        result_data =result_array[0].split("#");        

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text).click(function () { alert(i) });  
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       
    }
}

【问题讨论】：

典型的循环范围失败。 for 循环不会创建作用域，因此所有点击回调都会在循环结束后提醒 j 的值。
但是没有第二个 for 循环就出现了问题，请参阅原始尝试。
还是一样的问题。循环将完成，并且 click 事件中的 i 将与 for 循环后的 i 相同，这将是它的最后一个值。
通过使用 IIFE 为 for 循环的每次迭代赋予它自己的范围。或者改用 jQuery 的 $.each 方法而不是 for 循环。
这将是修复它的一种方法。可能是最漂亮的方式。

标签： javascript jquery html ajax arrays

【解决方案1】：

如果您必须使用警报，那么您可以将点击处理程序封装在一个自执行函数中并将索引传递给它。喜欢，

(function (index) {
     fab_div.click(function () {
         alert(index);
     });
})(i);

虽然，这不是一个干净的方法。否则，如果您只想以任何方式操作 div 元素，那么直接添加任何方法也可以。喜欢，

fab_div.click(function () {
        alert($(this).attr('id'));
});

你可以参考一个jsFiddle here

【讨论】：

【解决方案2】：

奇怪的解决方案，但它奏效了！哈哈！非常感谢 Kevin B。

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        
        result_data =result_array[0].split("#");

        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text);
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       

        $("#ls_admin").children(this).each(function( index ) {
            $(this).append($(this).click(function () { alert($(this).text()) }));
        }); 
    }
}

【讨论】：