えっと、
追加した要素にすでにあるイベントの処理を再設定する
というのは、誤解を招く表現かな、と思いました。「イベントハンドラの再設定」というと、すでに設定されているハンドラを別のものに差し替える、という意味に捉えられるかな、と。
で、$('testBtn')
にイベントハンドラを登録していますが、新たに追加する要素に同じ id を付けるのはおかしいので、クラス .awesome
の要素 ($('.awesome')
) にイベントハンドラを登録する例でよいでしょうか。
javascript
1$.fn.awesome = function() {
2 $(this).on('click', function() {
3 console.log('AWESOME !!!');
4 return false;
5 });
6 return this;
7};
8$(function() {
9 $('#testBtn').awesome();
10 $('#appendBtn').on('click', function() {
11 // 新しい要素を $('#area') に追加する。ときに awesome をつける。
12 $('<button class="awsome">').val('something').awesome().appendTo($('#area'));
13 return false;
14 });
15});
ちょっと未検証のコードですが、こんな感じではどうでしょうか。
(てか、.awesome
関係ないコードになってしまった)
追記:プラグインなし版
上のコードでは awesome
という jQurty プラグインを定義して使っている形になっています。プラグインを使わずに、次のように書いてもいいかとは思いますが。
javascript
1$(function() {
2 function awesome($target) {
3 $target.on('click', function() {
4 console.log('AWESOME !!!');
5 return false;
6 });
7 return $target;
8 };
9 awesome($('#testBtn'));
10 $('#appendBtn').on('click', function() {
11 // 新しい要素を $('#area') に追加する。ときに awesome をつける。
12 awesome($('<button class="awsome">').val('something')).appendTo($('#area'));
13 return false;
14 });
15});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/23 03:57