adding attribute to dynamic controls generated in javascript

Question

I have a table created in javascript. On each row i am adding a checkbox. On checking the checkbox a warning message has to be displayed. how to add the oncheck attribute to a dynamic checkbox in javascript.

var tblRow = "<tr><td Style='display: none'>" + data.IxDetails
        "</td><td>" + data.Name +
             "</td><td>" + GroupTable +
              "</td><td>" + (data.AllowFileAttachment == true ? "Yes" :"No" )  +
        "</td><td>" + (data.SetToInActive == true ? "INACTIVE" : "ACTIVE" ) +
              "</td><td><input type = 'checkbox' id='" +
       data.Index + "' name='selectedData'  value='123' "+
        "</td><td><input type = 'checkbox' id='dl" +
       data.Index + "' name='selectedData'  value='123' >" +
        "</td></tr>";
        $('#DataTable> tbody:last').append(tblRow);

Olrac · Accepted Answer · 2013-06-27 08:00:06Z

4

Try me:

 $('table tr').find('input:checkbox').on('click', function(){
         alert("I'm clicked!");
 });

SIMPLEST DEMO FIDDLE

edited Jun 27, 2013 at 8:00

answered Jun 27, 2013 at 7:45

Olrac

1,5372 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nix Over a year ago

You dont have to use find() but place 'input:checkbox' as a 2nd parameter on your on() instead.

Vond Ritz Over a year ago

SIMPLEST DEMO FIDDLE. nice. hehehe. alert("I'm clicked") vs alert('just clicked!');

nix Over a year ago

@VondRitz but it will not work on dynamically added checkboxes. Read event delegation here: api.jquery.com/on :)

nix Over a year ago

and remove tr from $('table tr').. =)

Manoj Nayak Over a year ago

But how to differentiate between the two checkboxes

palaѕн · Accepted Answer · 2013-06-27 07:41:02Z

2

Since the checkbox is added dynamically, you need to use event delegation to register the event handler.

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#DataTable').on('click', ':checkbox', function(event) {
    event.preventDefault();
    alert('testlink'); 
});

This will attach your event to any checkbox within the #DataTable element, reducing the scope of having to check the whole document element tree and increasing efficiency.

A SIMPLE WORKING FIDDLE DEMO

answered Jun 27, 2013 at 7:41

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

rhapsodyn · Accepted Answer · 2013-06-27 07:40:35Z

1

var tblRow = "<tr><td Style='display: none'>" + data.IxDetails
        "</td><td>" + data.Name +
             "</td><td>" + GroupTable +
              "</td><td>" + (data.AllowFileAttachment == true ? "Yes" :"No" )  +
        "</td><td>" + (data.SetToInActive == true ? "INACTIVE" : "ACTIVE" ) +
              "</td><td><input type = 'checkbox' onchange='yourfunction()' id='" +
       data.Index + "' name='selectedData'  value='123' "+
        "</td><td><input type = 'checkbox' onchange='yourfunction()' id='dl" +
       data.Index + "' name='selectedData'  value='123' >" +
        "</td></tr>";
        $('#DataTable> tbody:last').append(tblRow);

answered Jun 27, 2013 at 7:40

rhapsodyn

3,3705 gold badges31 silver badges36 bronze badges

Comments

Subhash Sasidharakurup · Accepted Answer · 2013-06-27 08:12:15Z

1

for dynamically added controls better use

<input type = 'checkbox' id='dl" +
       data.Index + "' name='selectedData' href="javascript:void(0);" onclick="dynaclick('id1')"  value='123' >

and javascript function is

function dynaclick(id){
alert('checkbox with'+id+' is clicked');

}

answered Jun 27, 2013 at 8:12

Subhash Sasidharakurup

3682 silver badges8 bronze badges

Comments

Max Frai · Accepted Answer · 2013-06-27 07:38:33Z

0

For dynamically generated content you could use on

$("form").on("change", function(event) {
  alert('Checkbox click!');
});

answered Jun 27, 2013 at 7:38

Max Frai

64.6k82 gold badges205 silver badges311 bronze badges

Collectives™ on Stack Overflow

adding attribute to dynamic controls generated in javascript

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related