4

クラスのリンクappendhtml入力チェックボックスをクリックした後、入力チェックボックスをクリックしてアラートを取得した後is checked。

次のコードを試しましたが、うまくいきません：

デモ: http://jsfiddle.net/HsveE/

HTML

<a href="#" id="ho">Click Me</a>
<div class="hi"></div>

jQuery

$('#ho').on('click', function(e){
    e.preventDefault();
    $('.hi').append('<input type="checkbox" id="isAgeSelected"/>');
})
$(".hi input[type=checkbox]").on('click',function () {
    alert('is checked')
})

どうすれば修正できますか？

4

3 に答える 3

2

バインド時に要素が存在しないため、委任する必要があります-または要素が存在した後にバインドします

$(".hi").on('click',"input[type=checkbox]",function () {
    alert('is checked')
})

http://jsfiddle.net/5dYwG/

これを行うと、イベント ハンドラーが class=hi を使用して要素にバインドされます。これは、DOM の準備ができた時点で存在し、チェックボックスを追加する要素であるためです。次に、チェックボックスからバブルアップしてそれらを処理するときに、イベントをリッスンします。

もう 1 つの方法は、バインディングを常に document.ready 関数内にラップすることです。これにより、dom がロードされるまで待機してから、イベント ハンドラーをバインドしようとします。

$(function(){
   // your binding code here
})

編集

$(".hi").on('click',"input[type=checkbox]",function () {
  if(this.checked){
    alert('is checked')
  }
})

フィドル

于 2013-01-24T21:15:10.073 に答える
0

これを使って...

$(".hi").on('click',"input[type=checkbox]",function () {
    if($(this).is(':checked')){
        alert('is checked');
    }
})

ご挨拶。

于 2013-01-24T21:28:18.253 に答える
0

これが解決策です。

$('#ho').on('click', function(e){
  e.preventDefault();
  $('.hi').append('<input type="checkbox" id="isAgeSelected"/>');
});
$(".hi").on('click', '#isAgeSelected', function () {
  alert('is checked = ' + this.checked)
});

また、 http://jsfiddle.net/greenrobo/3Rugn/を試してみたい場合はフィドル

于 2013-01-24T22:09:43.880 に答える