Home/ Questions/Q 8590713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:21:25+00:00

When I created a checkbox with HTML the action is triggered normal but the

  • 0

When I created a checkbox with HTML the action is triggered normal but the problem when I create the checkbox with javascript(when I add a row in my table with button and I click to the new checkbox) action does not work.

This is my code : 

<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>

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because your event handler:

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

    …is applied only to those inputs that match the selector at that moment – before the dynamically created inputs exist. You can instead use a delegated event handler that is attached to a parent element (or to the document) that checks the selector at the time the event occurs:

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

    The .on() method was added in version 1.7, so if you’re using an older version of jQuery use .delegate() instead. (Unless you’re using a really old version, pre 1.4.2, in which case you’ll have to use .live().)

    • 0