読者です 読者をやめる 読者になる 読者になる

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 らしい.それが直接の原因でないんだろうけど.

http://api.jquery.com/live/

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>