Not working checkbox checked

Question

When i add to div values from input, i need to click on checkbox so its alert("checked"). My code not working correctly. Can u please tell me what i've been doing wrong.

Here is my code

HTML:

<div class="container">
    <form>
        <p>Title:</p>
        <input type="text" id="title">
        <p>Link:</p>
        <input type="text" id="link">
    </form>
    <br>
    <button class="btn btn-success">Add</button>
</div>

<div class="content" style="margin-top:50px"></div>

JQuery:

$(function() {
    $(".btn-success").click(function(){
        var  title_val = $("#title").val();
        var  link_val = $("#link").val();
        $(".content").append('<div class="col-xs-6 col-md-4"><ol class="breadcrumb"><h4>'+title_val+'</h4><input type="checkbox" id="checkbox"></ol><a href="http://'+link_val+'" class="thumbnail"></a></div>');
    });

    $("#checkbox").click(function(){
        if($(this).is(":checked")) {
            alert("Checked");
        }
    });
});

JSfiddle

Viktor the first reason why you code was not working was always use on if your u r adding html dynamically after that other was never use id if your adding multiple elements for same id always prefer class for that. — Developer
– Developer, Commented Aug 28, 2015 at 8:50
@Gaurav Events do not work without delegation on dynamically added elements. I have no clue who voted your answer up. Seriously, the quality of StackOverflow has become down. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Aug 28, 2015 at 8:51

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-28 08:42:43Z

2

The checkbox is dynamically added. So you need to delegate the event handler to already existing element, and make sure not to give same IDs:

$(document).on("click", ".checkbox", function(){
    if($(this).is(":checked")) {
        alert("Checked");
    }
});

Change your appending function to use class instead of ID.

$(".content").append('<div class="col-xs-6 col-md-4"><ol class="breadcrumb"><h4>'+title_val+'</h4><input type="checkbox" class="checkbox"></ol><a href="http://'+link_val+'" class="thumbnail"></a></div>');

answered Aug 28, 2015 at 8:42

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

3 Comments

Developer Over a year ago

i am agree with you you have answered properly

Developer Over a year ago

you answer is best i have just shared what i thought

Viktor Over a year ago

@Praveen Kumar Thanks alot

Praveen Kumar Purushothaman · Accepted Answer · 2019-04-11 13:47:14Z

1

Add Class on the checkbox then is jquery use this code :

$('.chk').live('click',function(){
        if($(this).is(":checked")) {
            alert("Checked");
        }
    })

Check on this link Link

edited Apr 11, 2019 at 13:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Aug 28, 2015 at 8:46

Developer

6,35019 gold badges63 silver badges120 bronze badges

2 Comments

Praveen Kumar Purushothaman Over a year ago

Please add the concept of event delegation.

Praveen Kumar Purushothaman Over a year ago

1. Your code is not same as in fiddle. 2. Using .live()? Nice. That's dead long back.

rrk · Accepted Answer · 2015-08-28 08:46:26Z

0

DEMO

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

edited Aug 28, 2015 at 8:46

answered Aug 28, 2015 at 8:42

rrk

15.9k4 gold badges32 silver badges49 bronze badges

2 Comments

Praveen Kumar Purushothaman Over a year ago

IDs cannot be duplicated. Basic rule.

rrk Over a year ago

@PraveenKumar yes, you are right. but I did not notice that It was possible to add muliple checkboxes.

Pankaj Kumar · Accepted Answer · 2015-08-28 09:12:53Z

0

Use this code
$(document).on('click', '#checkbox' , function(){ 
  if($(this).is(":checked")) {
    alert("Checked");
  } 
});

answered Aug 28, 2015 at 9:12

Pankaj Kumar

946 bronze badges

Collectives™ on Stack Overflow

Not working checkbox checked

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related