I have ajax call to get data from database and show the table row after success response. Inside the table row I have checkbox on it. I want to get selected index after the checkbox checked. I faces some problem when I set event handling to get selected index. This is my scripts.
<script type="text/javascript">
$("#buttonEdit").click(function(){
var param1 = $('#param1').val();
var param2 = $('.param2').val();
var status = '';
$.ajax({
url: "<?=site_url()?>data/get_json",
type: "POST",
dataType:"json",
data: {"param1": param1, "param2": param2},
success: function (response)
{
if(response.length > 0)
{
$.each(response, function(i, item) {
var markup = "<tr><td><input type='checkbox' name='close' class='cls'></td><td><input type='text' name='price[]' value='"+response[i].price+"' readonly></td></tr>";
$("table tbody").append(markup);
});
}
}
});
});
</script>
<script type="text/javascript">
$(".cls").each(function(i) {
if (this.checked) {
alert("Checkbox at index " + i + " is checked.");
}
});
</script>
I don't have problem with the ajax, my problem just inside second script to get the selected index. The script seems not working without any error.
Please anyone help me to solve this problem. Thanks.