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
– wirey00

2013-01-24 21:13:22 +00:00
Commented Jan 24, 2013 at 21:13 — wirey00
– wirey00, Commented Jan 24, 2013 at 21:13

wirey00 · Accepted Answer · 2013-01-24 21:33:09Z

2

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

edited Jan 24, 2013 at 21:33

answered Jan 24, 2013 at 21:15

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wirey00 Over a year ago

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

MG_Bautista · Accepted Answer · 2013-01-24 21:28:18Z

0

Use this...

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

Greetings.

answered Jan 24, 2013 at 21:28

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

Comments

Chandu Dexter · Accepted Answer · 2013-01-24 22:09:43Z

0

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/

answered Jan 24, 2013 at 22:09

Chandu Dexter

4562 silver badges4 bronze badges

Collectives™ on Stack Overflow

Alert after checked input checkbox

HTML

jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related