Question

我将一系列div元素附加到父div。附加click事件会绑定到父元素。

var element = "";
for (var j = 0; j < 10; j++) {
  element = element + "<div class='aClass'>"+j+"</div>";
}

$(".wrapper").append(function() {
  return $(element).click(foo);
});

function foo() {
  alert("index of element is:");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

我需要知道单击了哪个附加div。

Answer 1

您可以使用index()方法

var element = "";
for (var j = 0; j < 10; j++) {
  element = element + "<div class='aClass'>j</div>";
}

$(".wrapper").append(function() {
  return $(element).click(foo);
});

function foo() {
  alert("index of element is:"+$(this).index());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 2

要获取引发事件的元素的引用，请在事件处理程序中使用this关键字。要检索其索引，可以使用jQuery的index()方法。

还要注意，通过将所有HTML附加到一个操作中并使用单个委托事件处理程序，可以使逻辑更简洁。试试这个：

var elements = (new Array(10)).fill('<div class="aClass">j</div>');

$(".wrapper").append(elements).on('click', '.aClass', function() {
  console.log(`index of element is: ${$(this).index()}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 3

您可以在每个迭代中（而不是在结束时）附加并附加事件。

for (let j = 0; j < 10; j++) {
  const element = $("<div class='aClass'>j</div>");
  element.click(() => foo(j));
  $(".wrapper").append(element);
}

function foo(index) {
  alert("index of element is: "+index);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 4

如果您使用的是jquery，并且想将一堆<div>附加到包装器上，并在每个包装器上添加一个click事件，而不是为每个<div>创建一个全新的事件■我将使用事件委托并将事件附加到父级$('.wrapper')，然后在子级中捕获事件。会是这样的。

for (var j = 0; j < 10; j++) {
    $('.wrapper').append($(`<div class="aClass">${ j }</div>`));
}

$('.wrapper').on('click', function(e) {
    const target = $(e.target);

    if (target.hasClass('aClass')) {
        console.log(target.index());
    }
});

Answer 5

您可以使用匿名函数将 this 对象传递给该函数，以便可以使用.index()查找位置：< / p>

var element = "";
for( var j = 0; j < 10; j++){
  element = element + "<div class='aClass'>"+j+"</div>";
}

$(".wrapper").append(function() {
  return $(element).click(function() {foo(this)});
});

function foo(el){
  console.log("index of element is:", $(el).text() + ' at index ' + $(el).index());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 6

function foo() {
  alert("index of element is:" +  $(this).text() + "-" + $(this).index());
}

var element = "";
for (var j = 0; j < 10; j++) {
  element = element + "<div class='aClass'>j</div>";
}

$(".wrapper").append(function() {
  return $(element).click(foo);
});

function foo() {
  alert("index of element is:" +  $(this).text() + "-" + $(this).index());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 7

您可以在循环中append()。并将foo包装在包装器中，并将其传递给单击。

var element = "";
const wrapper = $(".wrapper");
for(let j = 0; j < 10; j++){
   element = "<div class='aClass'>j</div>";
   wrapper.append(function() {
     return $(element).click(() => foo(j));
   });
}
function foo(index){
  alert("index of element is:" + index);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

如何在动态附加的内部元素上附加点击事件？

7 个答案: