Google と StackOverflow で何時間も検索した後、問題の解決策が見つかりませんでした。
次のシナリオを想定します。
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() は、存在しない要素または将来出現する要素をバインドできますが、何をしても機能しませんでした。
また、onclick="function()" も試しましたが、うまくいきませんでした。
すべての助けに感謝します。
ありがとう！