私は以前に同様のことをしたことがあります。チェックボックスをクリックしてから何か(.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が動作しなかったのか興味がありましたか?
動的に作成された要素の場合、使用する必要があります event delegation
、属性で選択する場合は、 attribute equals selector
。
コード:
$(document).on("change", "input[name='member']", function () {
alert("FECK");
if (this.checked) {}
});
要素に「change」イベントがバインドされていて、チェックボックスプロパティを変更した後に「change」イベントを発生させる必要がある場合は、以下の代替回避策を使用できます。
確認したい場合:
$('#MyCheckbox input:checkbox').prop('checked', false).click();
チェックを外したい場合:
$('#MyCheckbox input:checkbox').prop('checked', true).click();
逆のプロセスを使用しています。最初のものについては、チェックボックスプロパティがチェックされていないことを確認し、クリックをトリガーしてチェックボックスプロパティを「チェック済み」に変更し、バインドされている場合は「変更」イベントを発生させます。
change
イベントを委任します
$("tr").on("change","input[name='member']",function(){
alert ("FECK");
if(this.checked) {
//do other stuff
}
})
$ .eachループ内で「change」リスナーをバインドしています。たぶん、次のように変更リスナーをより具体的にします。
$('#email_span').on('change', '.member', function(){
console.log('you hit it'); if($(this).prop('checked')){
console.log('it\'s checked');
}
});
あなたはこのように使うべきです:
$('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();
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");
}
});