Alert after checked input checkbox

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?

delegation... or bind after append – wirey00 Jan 24 '13 at 21:13 — wirey00, Jan 24 '13 at 21:13

wirey00 · Accepted Answer · 2013-01-24T21:33:09.910

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

because you are alerting everytime it is clicked.. If you only want it to alert when it's checked then you need an if statement — wirey00, Jan 24 '13 at 21:31

score 0 · Answer 2 · answered Jan 24 '13 at 21:28

0

Use this...

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

Greetings.

answered Jan 24 '13 at 21:28

MG_Bautista

2,593
2
18
33

score 0 · Answer 3 · answered Jan 24 '13 at 22:09

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/

Alert after checked input checkbox

HTML

jQuery

3 Answers3

Linked