0

HTML でチェックボックスを作成すると、アクションは正常にトリガーされますが、javascript でチェックボックスを作成すると問題が発生します (ボタンを使用してテーブルに行を追加し、新しいチェックボックスをクリックすると) アクションは機能しません。

これは私のコードです:

<HTML>
<HEAD>

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<SCRIPT>


    $(window).load(function() {

        $('input[name=chk]').change(function() { 
            if ($('input[name=chk]').is(':checked')) {
                alert("checked");   
                }
            else {
                alert("unchecked"); 
            }
        }); 
    });

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.setAttribute("name","chk");
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);
    }


</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" /> </TD>
    </TR>
</TABLE>

</BODY>
</HTML>

ありがとうございました

4

5 に答える 5

5

これは、イベント ハンドラーが次のようになっているためです。

$('input[name=chk]').change(function() { ... });

...動的に作成された入力が存在する前に、その時点でセレクターに一致する入力にのみ適用されます。代わりに、イベントの発生時にセレクターをチェックする親要素 (またはドキュメント) にアタッチされた委任されたイベント ハンドラーを使用できます。

$('#dataTable').on('change', 'input[name=chk]', function() { ... });

この.on()メソッドはバージョン 1.7 で追加されたため、古いバージョンの jQuery を使用している場合は.delegate()代わりに使用してください。(ただし、1.4.2 より前の非常に古いバージョンを使用している場合を除きます。その場合は、 を使用する必要があります。.live() )

于 2012-09-26T13:25:04.303 に答える
2

動的に生成された要素の場合、要素またはドキュメント オブジェクトの静的な親の 1 つからイベントを委任する必要がありますon。メソッドを使用できます。

$('#dataTable').on('click', 'input[name=chk]', function(){
   // ...
})
于 2012-09-26T13:25:32.723 に答える
1

.change()ここでの問題は、DOM にまだ存在しない要素にイベント リスナー ( ) をアタッチしようとしていることです。chackbox を作成した後でのみ、リスナーをバインドする必要があります。

于 2012-09-26T13:25:22.730 に答える
0

on()jquery 1.7以降を使用している場合は、代わりにメソッドを使用する必要があります

作業フィドルを参照してください

    $('#dataTable').on('click','input:checkbox',function() { 
        if ($('input[name=chk]').is(':checked')) {
            alert("checked");   
            }
        else {
            alert("unchecked"); 
        }
    });
于 2012-09-26T13:23:55.473 に答える