Alert After Checked Input Checkbox

I want after click on link append html input checkbox in a class, after it when clicked on input checkbox getting alert is checked. I tried as following code but dont work for me:

Solution 1:

You need to delegate since your element doesn't exist at the time of binding - or bind after element does exist

$(".hi").on('click',"input[type=checkbox]",function () {
    alert('is checked')
})

http://jsfiddle.net/5dYwG/

Doing this binds the event handler to your element/elements with class=hi - since it exists at the time the dom is ready and is the element you are appending your checkboxes to. It will then listen for the event as it bubbles up from your checkboxes and handle them.

One other thing is to always wrap your binding inside a document.ready function so it will wait until your dom is loaded before trying to bind the event handlers.

$(function(){
   // your binding code here
})

EDIT

$(".hi").on('click',"input[type=checkbox]",function () {
  if(this.checked){
    alert('is checked')
  }
})

FIDDLE

Solution 2:

Use this...

$(".hi").on('click',"input[type=checkbox]",function () {
    if($(this).is(':checked')){
        alert('is checked');
    }
})

Greetings.

Solution 3:

Here is the solution.

$('#ho').on('click', function(e){
  e.preventDefault();
  $('.hi').append('<input type="checkbox" id="isAgeSelected"/>');
});
$(".hi").on('click', '#isAgeSelected', function () {
  alert('is checked = ' + this.checked)
});

Also fiddle if you like to try http://jsfiddle.net/greenrobo/3Rugn/