Dynamically attach checked event on checkBox using JQuery

i have a checkBox generated at runtime using a for loop, now i want to attach checked event for each checkboxes... how to implement the same in jquery.

i am us开发者_StackOverflowing tables.. td.. for adding checkBox.

<script>
var genTable = "<table border='1' style='border-collapse:collapse' cellpadding='5' width='100%'><thead><tr><td><input type='checkBox' id='mainCheck' /></td><td>ID</td><td>ArticleTitle</td><td>ArticleDate</td></tr></thead>";
for (i = 0; i < result.length; i++) {
                    if (result[i].IsImageAvailable == "TRUE") {
                        iChecked = "";
                    }
                    else {
                        iChecked = "disabled = disabled";
                    }
                    genTable += "<tr><td width='2%'>
<!--Here is my checkBox on which i want to attach checked event-->
<input type='checkBox' id='chkBox" + i + "' onchange='FillSecondGrid(" + result[i].ArticleID + ")' />

</td><td width='5%'>" + result[i].ArticleID + "</td><td>" + result[i].ArticleTitle + "</td><td width='5%'>" + result[i].ArticleDate + "</td></tr>";
                }
                genTable += "</tbody></table>";
                document.getElementById("gridFirst").innerHTML = genTable;
</script>

---

As you're generating the checkbox markup in script tags, you can just add the onchange event after the checkbox generation:

<script>
  // .. checkbox generation here ..
  $('table').find('input[type=checkbox]').change(function () { /* do things on change here */ });
</script>

Or, alternatively, just use .on on all checkbox elements on document ready:

$(function () {
  // on document ready..
  $('table input[type=checkbox]').on('change', function() { /* do things on change here */ });
}

The .on method will catch any new checkboxes created after document ready (as well as those already present) and attach your onchange event.

---

No answers here have passed the event in, which you need to find out if the checkbox is checked or not. Here is a cross browser snippet that attaches the event to all the check boxes that are a child of the given element and works out when the checkbox is clicked if it is on or off.

var checkboxes = $(element).find("input[type=\"checkbox\"]");
$(checkboxes).change(function (event) {
    // These two lines compensate for getting the event and checkbox when in ie.
    if (!event) { var event = window.event; }
    var checkbox = event.target || event.srcElement;
    if (checkbox.checked)
        alert("Checkbox is checked");
    else
        alert("Checkbox is not checked");
});

I don't think the two ie compensating lines are actually needed for jQuery events, but useful to put there so that your code will work with none jQuery events as well.

---

You can use live() for that. Here is an example (please check for syntax etc.):

$('.someclassforyourcheckbox').live('change', function(){//do your stuff})

---

add a class to your checkbox

<input class="dynChk" type='checkBox' id='chkBox" + i + "' onchange='FillSecondGrid(" + result[i].ArticleID + ")' />

and then use delegate or live

$("table").delegate(".dynChk",'change',function(){
//your code
});

with live

$(".dynChk").live("change",function(){
//your code
});