0

我只是想不通...我正在尝试创建一个列表。在每个 li 中都有相同的用户。

我想为每个用户创建一个唯一的 div id，以便可以单击并链接到特定的单击功能...

这是我得到的：

$(document).ready(function(){

    var columnsarray = [];

    for(var i = 0; i < 3; i++){

        var userarray = [];

        for(var j = 0; j < 2; j++){

            userarray.push("<div id='userholder-"+j+"-"+i+"'>UserID "+j+"</div>");

            $(function(){
                $("#userholder-"+j+"-"+i+"").click(function() {
                    alert("It Works!");
                });
            });
        }

        columnsarray.push($("#thelist").append("<li><div class='info'></div>"+userarray+"</li>"));

    }

});

当在我的“用户持有人”中使用 j 和 i 时，它不起作用......如果我丢弃 j 和 i 它就完美了......难道不可能做我想做的事吗？？？

jsfiddle 示例：http: //jsfiddle.net/jmansa/sTULJ/

希望提前帮助和感谢:-)

4

3 回答 3

1

这不是正确的方法。

为每个 div 添加一个类，并在调用 click 函数时获取一个 data-id：

jQuery代码：

$(document).ready(function(){

    var columnsarray = [];

    for(var i = 0; i < 3; i++){

        var userarray = [];

        for(var j = 0; j < 2; j++){

            userarray.push("<div id='userholder-"+j+"-"+i+"' class='press' data-id='"+j+"-"+i+"'>UserID "+j+"</div>");

        }

        columnsarray.push($("#thelist").append("<li><div class='info'></div>"+userarray+"</li>"));

    }
    $('.press').click(function(){
        alert($(this).attr("data-id"));
    })

});

文件更新：-> http://jsfiddle.net/sTULJ/1/

于 2013-07-18T12:16:08.873 回答
0

在动态创建元素时，您需要使用 live 方法来附加事件处理程序。在您注册处理程序时，没有与选择器匹配的元素。尝试更改您的代码以使用 live 像这样：

 $("#userholder-"+j+"-"+i+"").live("click",function(){
 alert("It Works!");
  }
 );
于 2013-07-18T12:14:49.037 回答
0

您还可以拥有该class属性并拥有该类的单击事件，例如：

$(document).ready(function(){

    var columnsarray = [];

    for(var i = 0; i < 3; i++){

        var userarray = [];

        for(var j = 0; j < 2; j++){

            userarray.push("<div id='userholder-"+j+"-"+i+"' class='clickClass'>UserID "+j+"</div>");

        }

        columnsarray.push($("#thelist").append("<li><div class='info'></div>"+userarray+"</li>"));

    }

    $(".clickClass").click(function(){
         alert("It Works!");
    });

});

检查 js Fiddle 链接：http: //jsfiddle.net/KG4LD/

于 2013-07-18T12:17:25.323 回答