Question

我正在关注绑定事件的this线程的aM1Ne回答（投票最多的回答），因为我动态生成多个元素我的js代码看起来像

$(document).on('click', ".myCheckBox" , function() {
    //.....
});

此处myCheckBox是分配给所有生成复选框的类。现在我想要点击复选框的索引。我试过了

alert($(this).index());

内部。但它始终显示0。有没有办法获得包含myCheckBox类的点击复选框的索引？

在HTML中我有一个复选框

<input type="checkbox" name="" class="myCheckBox" >

并在一个按钮和onclick上

$("#clickAdd").click(function()
{
    ("#myDiv").append("<input type=\"checkbox\"  class=\"myCheckBox\" >");
 });

Answer 1

我不知道真正的解释，但这段代码就像魅力一样

$(document).on('click', ".myCheckBox" , function() {
     var checkIndex = $(this).closest('.myCheckBox').index('.myCheckBox');
     alert(checkIndex);
});

Answer 2

如果您在生成复选框时能够分配值，我会采用稍微不同的方法，例如：

$(cb).data('indexVal', index++);

您可以使用the data method指定任意对象/信息。然后，您可以在单击事件处理程序中轻松检索它：

alert($(this).data('indexVal'));

并且它直接从元素中读取而不用担心它在页面中的位置。

使用您添加的HTML /脚本，我会这样做：

var indexVal = 1;
$("#clickAdd").click(function() {
    var inp = $('<input>', {type : 'checkbox' });
    inp.addClass('myCheckBox');
    inp.data('indexVal', indexVal++);
    ("#myDiv").append(inp);
});

使用class属性获取自动生成元素的索引

2 个答案: