Question

嘿我在将事件附加到动态生成的元素时遇到问题。我将不胜感激任何有关解决问题的建议我不确定它是用于附加事件的方法还是其它的方法：

for (var i = 0; i < array.length; i++) { 
itemlist=itemlist.concat('<pre'+' id="pres'+i+'"'+'>'+array[i]+'</pre>');

var name = '#pres'+i;
$( name ).click(function() {
  alert( "Handler for .click() called." );
});
}

我也尝试过这种方法，我在堆栈溢出时发现但是没有产生结果：

var name = '#pres'+i;
$(name).on('click', function() {
    alert( "Handler for .click() called." );
});

虽然在chrome中检查所有元素都存在正确的ID，但是我附加的jquery事件不会执行其警报。我已经看了一些解决方案但是我不想将相同的功能附加到所有＆＃34;＆＃34;然而，可以接受将相同事件附加到循环中的每个事件的标签。任何帮助将不胜感激：）

Answer 1

您可以使用单个公共类并将单个委托事件处理程序附加到所有元素，而不是生成唯一的id属性，这会使代码不必要地变得更加复杂并且可能很难维护。试试这个：

$('#myContainer').on('click', '.foo', function() {
    // handle the element click here...
    console.log($(this).text());
});

var html = '';
for (var i = 0; i < array.length; i++) { 
    html += '<pre class="foo">' + array[i] + '</pre>';
}
$('#myContainer').append(html);

Answer 2

Rory McCrossan的回答是最简单的方法，如果你只是在开头添加元素并在之后设置.click。
但是，如果你在晚些时候调用生成函数，我建议使用类似这样的函数，这个函数在创建每个元素时设置.click事件处理程序。

你仍然可以拥有你的身份证等等，你真的不需要它们。

    var itemlist=[]
    var array=["Element 1","Element 2","Element 3"]
    for (var i = 0; i < array.length; i++) {
        element=$('<pre' + ' id="pres' + i + '"' + '>' + array[i] + '</pre>');
        $(element).click(function () {
            alert("Handler for .click() called.");
        });
        itemlist.push(element);
    }
    $("body").append(itemlist)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您需要在包含所有on元素的容器中使用pre方法，如下面的代码。

假设您有这个结果：

<div class="container-pre">
  <pre id="pres1" data-id="1" class="pre-element">Some text 1</pre>
  <pre id="pres2" data-id="2" class="pre-element">Some text 2</pre>
  <pre id="pres3" data-id="3" class="pre-element">Some text 3</pre>
</div>

然后你的jQuery配置就是这样：

$(document).ready(function() {
  $(".container-pre").on("click", ".pre-element", function(e) {
        var elem = $(e.currentTarget);
        var id = elem.attr("data-id");
        alert( "Handler for .click() called at element " + id);
    });
});

您可以使用此代码查看此plunker：

https://embed.plnkr.co/v61GxazfsT8RscuMTxI9/

将事件附加到动态元素

3 个答案: