

例えば、以下のようなコードにおいて追加したところをクリックしてもアラートを出したいです。

hoge.html

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <link href="hoge.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="hoge.js"></script>
      </head>
      <body>
        <div class="hogehoge">
          この中をクリックして
          <p class="fugafuga">元からある</p>
        </div>
      </body>
    </html>
    
[/code]

hoge.js

[code]

    $(function(){
        $('.hogehoge').on('click', function() {
            $(this).append('<p class="fugafuga">追加した</p>');
            return false;
        });
    
        $('.fugafuga').on('click', function() {
            alert('fugafuga');
            return false;
        });
    });
    
[/code]

hoge.css

[code]

    .hogehoge {
        border: 1px solid black;
    }
    
    .fugafuga {
        width: 5em;
        border: 1px solid red;
    }
    
[/code]

追加用にボタンなどの要素を追加したり親子の関係でなくりたりすればできそうですが、  
あまりhtml部分は変更したくありません。  
他に方法はありますでしょうか。  
よろしくお願い致します。


CC BY-SA 3.0
2015-08-17T04:30:16.943
14508
2015-08-17T06:25:23.007
10954
question
jquery
jQuery 親要素へのonclickがあるとき、append等で追加した後の子要素でonclickを適応させたい


こんな感じでどうでしょうか？

[code]

    $(function(){
        var fn = function() {
            alert('fugafuga');
            return false;
        }
    
        $('.hogehoge').on('click', function() {
            var el = $('<p class="fugafuga">追加した</p>');
            el.on('click', fn);
            $(this).append(el);
            return false;
        });
    
        $('.fugafuga').on('click', fn);
    });
[/code]

[code]

    .hogehoge {
        border: 1px solid black;
    }
    
    .fugafuga {
        width: 5em;
        border: 1px solid red;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="hogehoge">
      この中をクリックして
      <p class="fugafuga">元からある</p>
    </div>
[/code]


CC BY-SA 3.0
2015-08-17T05:06:58.687
14511
2015-08-17T05:06:58.687
3516
14508
answer


ita_3yさんのように追加要素にイベントを組み込む方法もありますし、もしくは以下のように親要素にイベント処理を委譲する方法もあります。

[code]

    $(function(){
        $('.hogehoge').on('click', function() {
            $(this).append('<p class="fugafuga">追加した</p>');
            return false;
        });
    
        $('.hogehoge').on('click', '.fugafuga', function() {
            alert('fugafuga');
            return false;
        });
    });
[/code]

[code]

    .hogehoge {
        border: 1px solid black;
    }
    
    .fugafuga {
        width: 5em;
        border: 1px solid red;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="hogehoge">
      この中をクリックして
      <p class="fugafuga">元からある</p>
    </div>
[/code]


CC BY-SA 3.0
2015-08-17T06:12:09.567
14514
2015-08-17T06:25:23.007
2015-08-17T06:25:23.007
2232
2232
14508
answer