CODEWITHSUNDEEP
javascriptjqueryhtmldynamiccheckbox
Mils
Mils

Reputation: 1498

Action not triggered with checkbox created dynamically

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

Upvotes: 0

Views: 1655

Answers (5)

Hazem Salama
Hazem Salama

Reputation: 15111

You should be using the on() method instead, provided you are using jquery 1.7 or above

See working fiddle

    $('#dataTable').on('click','input:checkbox',function() { 
        if ($('input[name=chk]').is(':checked')) {
            alert("checked");   
            }
        else {
            alert("unchecked"); 
        }
    });

Upvotes: 0

Igor Shastin
Igor Shastin

Reputation: 2888

You need to set a .live handler for your checkboxes. Also, in the handler, you can use $(this) to get current checkbox.

Here you are: http://jsfiddle.net/edAv8/

Or you may use .on handler: http://jsfiddle.net/edAv8/1/

Upvotes: 0

Ram
Ram

Reputation: 144689

For dynamically generated elements, events should be delegated from one of static parents of the element or document object, you can use the on method. 

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

Upvotes: 2

alexandernst
alexandernst

Reputation: 15089

The problem here is that you'r trying to attach an event listener (the .change()) to an element that doesn't exist yet in the DOM. You should bind the listener only after creating the chackbox.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150050

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().)

Upvotes: 5

Related Questions