1

重複の可能性:
jQuery .html() 関数によって挿入された要素にイベント ハンドラーをバインドする

以下は単純な jquery スクリプトです。ユーザーが #FAC を押すと、テキスト ボックスが表示され、値が入力されます。#cs をクリックすると、#NC に入力された値がアラートとして表示されます。しかし、そうではありません。なぜですか？

$('#FAC').click(function() {
        $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
    });

    $('#NC').click(function() {
        alert($('#NC').val());

    });
4

3 に答える 3

2

あなたの問題をよく理解している場合は、これを試してください：

JSFIDDLE

$('#FAC').bind("click",function() {
    $('#FAC').unbind("click");
    $(this).html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
})

$(document).on('click', '#CS', function() {
    alert($('#NC').val());

});
于 2012-11-21T07:50:55.067 に答える
2

ID がの要素がクリックされ<input id="NC" />た場合にのみ、テキスト ボックスがドキュメントに追加されるため、すぐに使用すると、クリック ハンドラーをアタッチする要素が見つかりません。FAC$('#NC')

2 つのオプションがあります。クリック ハンドラーがドキュメントに追加されたら、クリック ハンドラーを追加します。

$('#FAC').click(function() {
    $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
    $('#NC').click(function() { /* alert here */ });
});

NCまたは、 idでクリックをフィルター処理する要素にデリゲート ハンドラーを追加します。

$('#FAC').click(function() {
    $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
});
$(document).on('click', '#NC', function() { /* alert here */ });
于 2012-11-21T07:55:57.367 に答える