replaceWithで追加されたhtmlのradiobuttonのchangeイベントワークの作成方法

Question

ラジオボタンのchangeイベントの発生を取得できました。しかし、私は今、代わりに、replaceWithでマークアップにラジオボタンが追加されているhtmlのためにそれを必要としました。

だから、それはと私のマークアップに追加されます。

だから、

$(this).replaceWith('<input type="radio" name="variety" value="null" id="myradio" />'); 

、変更イベントをキャッチするために私が持っているコードは次のとおりです。

$('#myradio').change(function() { 
     alert("Hello"); 
    }); 

だから、誰もが、私はこの仕事をするだろうか知っています最初のページが読み込まれた後にラジオボタンがページに追加されたことを考えれば、

Answer 1

動的に追加される要素を考慮に入れて、.on()（jQuery 1.7+）または.delegate()（jQuery 1.4.3+）を使用して変更イベントを購読することができます。例えば

：

$('#myradio').live('change', handler);    // jQuery 1.3+ 

$(document).delegate('#myradio', 'change', handler); // jQuery 1.4.3+ 

$(document).on('change', '#myradio', handler);  // jQuery 1.7+ 

それはdocument.readyコールバック内でこのサブスクリプションを配置する必要がないことを指摘することも重要です。

Answer 2

次を使用することができます。

 
$('body').on('change', '#myradio', function() { 
    alert("Hello"); 
}); 

あなたは事前に、あなたがラジオボタンを置くことになりますれる要素を知っていれば、あなたはパフォーマンスのためにその要素を一致させるために「身体」セレクタを変更する必要があります。どちらか

Answer 3

：

• 使用jQueryのon親

  <div id="container"> 
      <!--replaceable elements--> 
  </div> 
  
  //this will take effect on current and future children 
  $('#container').on('change','targetSelector',function(){ 
      alert("Hello"); 
  }); 
  

• たり、新しい要素に直接結合するには、

function func(){ 
    alert("Hello"); 
} 

var newEl = $('<input type="radio" name="variety" value="null" id="myradiobutton" />'); 
newEl.change(func); 
$(this).replaceWith(newEl); 

は私も最初のものを好みます、perfo洗練されたコード。

Answer 4

ラジオボタンを作成し、変更イベントを追加し、thisをラジオボタンに置​​き換えることができます。

var $radio = $('<input type="radio" name="variety" value="null" id="myradio" />'); 
$radio.change(function() { 
    alert("Hello"); 
}); 
$(this).replaceWith($radio);