3

下記ソースでの$('.test2')に対しての処理を通したいのですが
動かず困っています。
ご教授ください。

//とりあえず1回書き替えてみる
$('#hoge').html('<li>test1</li><div class="test1">click here</div>');

//これは動く
$('.test1').click(function(){
  console.log('test1 done');
  alert('test1 done');
  //実際にはここでajax処理を挟んでデータ取得後、次の行にはめたい
  $('#hoge').html('<li>test2</li><div class="test2">click here (this is problem. not work)</div>');
});


//これが動かない
$('.test2').click(function(){
  console.log('test2 done');
  alert('test2 done. ok!!');
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='hoge'></div>
tag1216
  • 881
  • 1
  • 11
  • 26
lasta
  • 31
  • 1
  • 1
    動的に'.test2'の要素を作成した後で、$('.test2').click(function(){...});を実行する必要があります。 – BLUEPIXY Nov 24 '16 at 02:18

2 Answers2

5

ajaxは非同期通信なので$('.test2').click... してる時点では対象が存在していないためですね。

いくつか方法はあると思いますが手っ取り早いのはデリゲートでしょうか。

$('#hoge').on('click', '.test2', function(){
    ....
});

あるいは要素追加後にイベントリスナーを追加してもいいかもしれません。

hinaloe
  • 4,751
  • 1
  • 13
  • 25
1

$('.test2').click(...) でクリック処理関数を指定する時、.test2 の要素はまだ作成されていません。

解決は、$('.test2').click(...) を、.test2 を追加した後にすれば結構です。

$('.test1').click(function(){
    console.log('test1 done');
    alert('test1 done');
    $('#hoge').html('<li>test2</li><div class="test2">click here (this is problem. not work)</div>');

    // ここに移動します
    $('.test2').click(function(){
        console.log('test2 done');
        alert('test2 done. ok!!');
    });
});

.html() で複雑のタグを揃って追加することはちょっと感じが良くないと思いますので、タグは別々で作成して、親要素に .append することをおすすめします。

$('.test1').click(function(){
    console.log('test1 done');
    alert('test1 done');

    $('#hoge').html('').append([
      $('<li>test2</li>'),
      $('<div class="test2">click here (this is problem. not work)</div>')
          .click(function() { // このような、作った要素にイベントリスナーを追加します
            console.log('test2 done');
            alert('test2 done. ok!!');
          })
    ]);
});
neuront
  • 820
  • 5
  • 11