Question

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:

DEMO: http://jsfiddle.net/HsveE/

HTML

<a href="#" id="ho">Click Me</a>
<div class="hi"></div>

jQuery

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

How can fix it?

Answer 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