1

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

Improve this question
2
  • 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. 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. Commented Aug 28, 2015 at 8:51

4 Answers 4

Reset to default
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>');
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

i am agree with you you have answered properly
you answer is best i have just shared what i thought
@Praveen Kumar Thanks alot
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

Improve this answer

2 Comments

Please add the concept of event delegation.
1. Your code is not same as in fiddle. 2. Using .live()? Nice. That's dead long back.
0

DEMO

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

2 Comments

IDs cannot be duplicated. Basic rule.
@PraveenKumar yes, you are right. but I did not notice that It was possible to add muliple checkboxes.
0 

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.