jquery - 実行時にidが定義されている要素のイベントを処理します

Question

IDは実行時に定義されるため、要素のイベントを処理したいと思います。

   <input type='submit' name='status' value='like' id='like'/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

  $('#like').live('click',function(){
     alert('like');
      $(this).attr({'id':'unlick','value':'unlike'});
  })​​​​​​​​​​;

   $('input').delegate('#unlike','click',function(){
      alert('unlike');
      $(this).attr({'id':'lick','value':'like'});
  });

これが問題のデモです</p>

Answer 1

いくつかのタイプミスとあなたは.on好きと違うの両方に使うことができます。

実例は次のとおりです。

http://jsfiddle.net/CgKwt/2/

Answer 2

2つのハンドラーを作成する代わりに、以下のようなことを行います。

マークアップ：

<input type='submit' name='status' class="like_status" value='like' id='like'/>

JS

$('.like_status').on('click',function(){
    alert(this.id);

    if (this.id == 'like') {      
       $(this).attr({'id':'unlike','value':'unlike'});
    } else {      
       $(this).attr({'id':'like','value':'like'});
    }
});

または、jQuery関数の代わりにthis.idとを使用することもできます。this.value

$('.like_status').on('click',function(){
    var btnTxt = (this.id == 'like')?'unlike': 'like';
    this.id = btnTxt;
    this.value = btnTxt;  //Or some other text.
});

デモ

Answer 3

キャプテンタイポが再びストライキをします。2番目のハンドラーに置き換えunlickてunlike使用します。live()

$('#like').live('click',function(){
    alert('like');
    $(this).prop('id', 'unlike').val('unlike');
});

$('#unlike').live('click',function(){
    alert('unlike');
    $(this).prop('id', 'like').val('like');
});

.prop()また、IDの設定と値の設定にも使用する必要があり.val()ます。

ああ、IDを変更するのではなく、フラグ（like / unlike）をデータ属性に格納してイベントハンドラー内で確認することを検討してください。そうすれば、ライブイベントやデリゲートは必要ありませんが、通常のイベントをバインドするだけで済みます。