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部分は変更したくありません。
他に方法はありますでしょうか。
よろしくお願い致します。

2 件の回答 2

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>

1
  • naga3さん。 恥ずかしながら、イベント処理を委譲できるなんて始めて知りました。 シンプルでいいですね、 ありがとうございます。
    – r-naga
    Commented 2015年8月17日 10:37
1

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

$(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);
});
.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>

1
  • ita_3yさん なるほど、勉強になりました。 ありがとうございます。
    – r-naga
    Commented 2015年8月17日 5:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。