[jQuery] イベントが走らない？（動的生成でハマったこと）

onChangeイベントが走らないぞ…

「input要素にちゃんとclass指定してjQueryでonChangeイベントの処理書いてるのに何も動かんぞ…？」
と最近ハマったので備忘録まで。

その1. cloneした要素

「追加」「削除」ボタンで、ある要素を増やしたり減らしたりするような処理を書いていたケース。
「追加」の場合は元要素をcloneしていました。

clone処理

var baseObj = $('.hogehoge:last');
if ( baseObj.length == 0 ) return;

//クローン作成
var cloneObj = baseObj.clone();

ところが、元々表示されていた要素ではイベントが発生するのに、「追加」した要素ではイベントが発生しません。
調べたところ、イベントもコピーするにはcloneの引数にtrueを指定する必要がありました。

clone処理改

//クローン作成
var cloneObj = baseObj.clone(true);

その2. 新たに生成した要素

動的な表示切り替えのため、例えばclass="fugafuga"を持った要素をつくりなおすような処理を書いていたケース。
いつものようにclass指定でonChangeイベントを記述していました。

onchange処理

$('.fugafuga').on('change', function(){
    //....
}

ところが、こちらもイベントが発生しません。
やはり調べた結果、動的生成した要素のイベントは以下のように記述する必要がありました。

onchange処理改

$(document).on('change', '.fugafuga', function(){
    //....
}