Question

在Google和StackOverflow上搜索了几个小时后，我找不到解决问题的方法。

假设情景：

html内容存储在数组html_content

中

有一组带有绑定事件的div，用div #html_cntr控制div中的内容，每个事件调用都是$（'＃html_cntr'）。html（html_content [0]），$（'＃html_cntr'） .html（html_content [1]），依此类推。

示例：

<html>

<div id="html_cntr" style='width:100px;height:100px;background-color:#CCC;'>hello</div>
<div id="hover_area" style='width:100px;height:100px;background-color:#999;'>hover</div>

</html>

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

html_content = Array();

html_content[0] = " \
<div id='test_area' style='width:100px;height:100px;background-color:#222;color:#FFF;'> \
click here \
</div> \
"

$('#hover_area').hover(function() {    
    $('#html_cntr').html(html_content[0]);
    alert('working');
});

// Does not work

$('#test_area').click(function() {
    alert('hello');
});

// Does not work

$('#test_area').on("click", function(){
    alert('hello');
});

// Does not work

$(document).ready(function(){
    $('#test_area').on("click", function(){
        alert('hello');
    });     
});

</script>

问题是，如何将事件绑定到使用$（'＃html_cntr'）动态生成的内容.html（）？ AFIAK on（）能够绑定将来出现的不存在的元素或元素，但无论我做什么，它都不起作用。

以下是jsfiddle

上的摘录

我也试过onclick =“function（）”，但没有运气。

感谢所有帮助，

谢谢！

Answer 1

您需要使用事件委派

$('#html_cntr').on('click','#test_area',function() {
    alert('hello');
});

http://learn.jquery.com/events/event-delegation/

Answer 2

你也可以使用......

$('#html_cntr').delegate('#test_area','click',function() {
    alert('hello');
});

JQuery将click事件绑定到html（）生成的内容

2 个答案: