JQuery將點擊事件綁定到html（）生成的內容

在Google和StackOverflow上搜索數小時後，我無法找到解決問題的方法。JQuery將點擊事件綁定到html（）生成的內容

假設情景：

HTML內容存儲在陣列中，html_content

有控制與ID #html_cntr在DIV的內容的一組與綁定事件的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 =「功能（）」，但沒有運氣。

所有幫助表示讚賞，

謝謝！

來源

2013-05-28 William Yang

您需要使用事件代表團

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

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

來源

2013-05-28 18:03:05

哈哈它的工作。謝謝:) –

@WilliamYang ..歡迎您！ –

而不是'$（'＃html_cntr'）'你也可以使用'$（document）'' –

您還可以使用...

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

來源

2013-05-28 18:33:44

JQuery將點擊事件綁定到html（）生成的內容

回答

相關問題