Question

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

但是，在单击时，新生成的警报整个结果数组的长度。我尝试了很多很多变化来尝试让它发挥作用，但事实并非如此。

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

例如，如果我这样做，fab_div.click(function () { alert(result_data[0]) });，我得到数组中LAST元素的名称，无论点击哪个元素都无关紧要。

任何人都可以向我解释......为什么？

我认为它可能与$("<div>") 有关，其中JQuery认为它与它分配的div相同。有没有办法解决？这是动态生成的，我不想让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)
        }       
    }
}

Answer 1

如果必须使用警报，则可以将单击处理程序封装在自执行函数中并将索引传递给它。像，

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

虽然这不是一个干净的方法。否则，如果您希望以任何方式操纵div元素，那么直接添加任何方法也将起作用。像，

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

您可以参考jsFiddle here

Answer 2

Wonky解决方案，但它有效！哈哈！非常感谢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()) }));
        }); 
    }
}

JQuery for循环卡在最后一个索引

2 个答案: