将事件附加到动态元素

嗨即时通讯有一个问题将事件附加到动态生成的元素。我想解决这个问题林不知道它，即时通讯使用附加的事件，还是它的别的方法是否欣赏任何意见：将事件附加到动态元素

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."); 
});

虽然在铬检查所有的元素以正确的ID存在，但是我已附加了jQuery事件不执行其警报。我已经看过一些解决方案，但是我不想将相同的功能附加到所有“”标签，但是将相同的事件附加到循环中的每个标签都是可以接受的。任何帮助，将不胜感激:)

来源

2016-07-04 D3181

'''变量'进一步声明'i'变量吗？ – gcampbell

ah有效点，我没有在循环之前声明var i，现在编辑它为：for（var i = 0; i D3181

检查此：https： //jsfiddle.net/caypL7dk/ – Tyr

代替生成独特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);

来源

2016-07-04 18:38:09

注意：OP已更正全局变量。 – gcampbell

我的意思是说他们已经改变了'（i = 0'到'for（var i = 0' – gcampbell

@ gcampbell啊！我明白你的意思了，谢谢:) –

罗里McCrossan的答案是这样做，如果你只需要添加开头的元素，之后他们的设置。点击最简单的方法。
但是，如果你晚于某个时间调用生成函数，我会建议使用类似这样的函数，该函数在创建时为每个元素设置.click事件处理函数。

您仍然可以拥有自己的ID等等，但您并不需要它们。

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>

来源

2016-07-04 18:51:18

您需要使用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/

来源

2016-07-04 18:57:38

回答

相关问题