jquery で javascript から追加した要素へのイベント追加
結論
<script type="text/javascript">
$(function() {
var template =
'<div>'
+ '<div class="fuga">aaa</div>'
+ '</div>';
var mus = $(template);
mus.find('.fuga').click(function() {
alert('hoge');
});
$('#aaa').html(mus);
});
</script>
だめ1
mus には 文字列の状態のものが入ってるので それの jQuery オブジェクトを別に作ってそこにイベントハンドラ追加しても html に追加されるものには影響しないらしい.
<script type="text/javascript">
$(function() {
var template =
'<div>'
+ '<div class="fuga">aaa</div>'
+ '</div>';
var mus = template;
$(mus).find('.fuga').click(function() {
alert('hoge');
});
$('#aaa').html(mus);
});
</script>
だめ2
live は deprecated らしい.それが直接の原因でないんだろうけど.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
<script type="text/javascript">
$(function() {
var template =
'<div>'
+ '<div class="fuga">aaa</div>'
+ '</div>';
var mus = $(template);
mus.find('.fuga').live('click', function() {
alert('hoge');
});
$('#aaa').html(mus);
});
</script>