2

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

hoge.html

<!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>

hoge.js

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

    $('.fugafuga').on('click', function() {
        alert('fugafuga');
        return false;
    });
});

hoge.css

.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}

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

r-naga
  • 51
  • 3

2 Answers2

3

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

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

$('.hogehoge').on('click', '.fugafuga', function() {
    alert('fugafuga');
    return false;
});



});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>
naga3
  • 655
  • 4
  • 10
  • naga3さん。 恥ずかしながら、イベント処理を委譲できるなんて始めて知りました。 シンプルでいいですね、 ありがとうございます。 – r-naga Aug 17 '15 at 10:37
1

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

$(function(){
    var fn = function() {
        alert('fugafuga');
        return false;
    }

$('.hogehoge').on('click', function() {
    var el = $('&lt;p class="fugafuga"&gt;追加した&lt;/p&gt;');
    el.on('click', fn);
    $(this).append(el);
    return false;
});

$('.fugafuga').on('click', fn);



});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>
ita_3y
  • 2,797
  • 2
  • 11
  • 15