web-dev-qa-db-ja.com

チェックボックス.changeが機能しないのはなぜですか(jquery)?

私は以前に同様のことをしたことがあります。チェックボックスをクリックしてから何か(.parent()など)を実行しますが、何らかの理由で今回は登録されません。誰かが理由を理解できますか?

$.each( email_list, function( key, value ) {
$("#email_span").after("<tr><td><input type='checkbox' name='member' checked='checked' onclick='check_change(this);' /></td><td>" + value.name + "</td><td>" + value.email + "</td></tr>");
$("#emails").prepend(value.email + ";");
});

$('.member').change(function() {
   alert ("FECK");
   if(this.checked) {
   }
});

それはすべて$(document).readyブロック内にあります。私はそれを関数呼び出しで動作させましたが、なぜjquery .changeが動作しなかったのか興味がありましたか?

7
Dird

動的に作成された要素の場合、使用する必要があります event delegation 、属性で選択する場合は、 attribute equals selector

コード:

$(document).on("change", "input[name='member']", function () {
    alert("FECK");
    if (this.checked) {}
});

デモ: http://jsfiddle.net/2fepaf0y/

38
Irvin Dominin

要素に「change」イベントがバインドされていて、チェックボックスプロパティを変更した後に「change」イベントを発生させる必要がある場合は、以下の代替回避策を使用できます。

確認したい場合:

$('#MyCheckbox input:checkbox').prop('checked', false).click();

チェックを外したい場合:

$('#MyCheckbox input:checkbox').prop('checked', true).click();

概要

逆のプロセスを使用しています。最初のものについては、チェックボックスプロパティがチェックされていないことを確認し、クリックをトリガーしてチェックボックスプロパティを「チェック済み」に変更し、バインドされている場合は「変更」イベントを発生させます。

5
Harry S.

class セレクターを使用していますが、.memberというクラスがありません。代わりに 属性等しい選挙人 を使用する必要があります:

$('input[name=member]').change...
1
antyrat

changeイベントを委任します

$("tr").on("change","input[name='member']",function(){
alert ("FECK");
   if(this.checked) {
    //do other stuff
   }
})
0
vikrant singh

$ .eachループ内で「change」リスナーをバインドしています。たぶん、次のように変更リスナーをより具体的にします。

$('#email_span').on('change', '.member', function(){ 
    console.log('you hit it'); if($(this).prop('checked')){
    console.log('it\'s checked');
  } 
});
0
Martin M

あなたはこのように使うべきです:

$('body').on('change', 'input[type=checkbox]',function (e) {
//what ever you wanna do
});

(グーグル検索は別の問題についてこのページを表示するのでもっと説明するのは理にかなっています)

そして、checkおよびncheckプログラムでchangeイベントを発生させたい場合は、。change()を追加する必要があります。これらのような行の終わり:

$('checkboxGroups').prop('checked', true).change();
$('checkboxGroups').prop('checked', false).change();
0
Arash.Zandi

checkboxes'check'と言うクラスを与えてから、以下に示すようにイベントの委任を試してください:-

$(document).on('change','.check',function() {
   alert ("FECK");
  if(this.checked) {
   alert ("checked");
  }
});

OR

$(document).on('change','input[name="member"]',function() {
   alert ("FECK");
  if(this.checked) {
   alert ("checked");
  }
});
0