例えば、以下のようなコードにおいて追加したところをクリックしてもアラートを出したいです。
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部分は変更したくありません。
他に方法はありますでしょうか。
よろしくお願い致します。