

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

[code]

    //とりあえず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!!');
    });
[/code]

[code]

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <div id='hoge'></div>
[/code]


CC BY-SA 3.0
2016-11-24T02:11:09.517
30627
2016-11-24T03:05:31.600
2016-11-24T03:05:31.600
18862
19693
question
jquery
jquery .html()で、特定条件の場合セレクタが有効にならない問題


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

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

[code]

    $('#hoge').on('click', '.test2', function(){
        ....
    });
    
[/code]

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


CC BY-SA 3.0
2016-11-24T02:23:26.757
30630
2016-11-24T02:23:26.757
2376
30627
answer


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

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

[code]

    $('.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!!');
        });
    });
    
[/code]

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

[code]

    $('.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!!');
              })
        ]);
    });
    
[/code]


CC BY-SA 3.0
2016-11-24T03:03:55.560
30635
2016-11-24T03:03:55.560
18621
30627
answer