Couldn't get id of dynamically created checkbox

Question

I have check boxes dynamically created, on each clone i increment the id of the checkbox and put the same name to the class of the div on which i want to perform action after checking that checkbox.
Now the problem is that when checkbox is cloned with new id on clicking that new box the alert doesn't work even though i have same class on both old and new check boxes. I haven't pasted the clone js code but it's working correct all fields are getting cloned with new id's and classes.
Here is the snippet for checkbox html and JS.

var chauffeur_index = $('.check_chauffer').length - 1;
$('.check_chauffer').last().attr('id', 'Chauffeur_details_' + chauffeur_index);
$('.Chauffeur_details').last().addClass('Chauffeur_details_' + chauffeur_index);

$(function() {
  $(".check_chauffer").change(function() {
    alert(this.id);
    if ($(this).is(":checked")) {
      $('.' + this.id).removeClass("hidden");
    } else {
      $('.' + this.id).addClass("hidden");
    }
  });
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="checkbox" class="check_chauffer" id="Chauffeur_details_0" name="check_chauffer">Chauffeur
<div class="clearfix"></div>
<input type="checkbox" class="check_airport" name="check_airport" id="airport_details_0">Airport
<span class="help-block"></span>

<div class="Chauffeur_details_0 hidden">
  <div class="col-md-2 booking_details">
    <h6><strong>Booking Details:</strong></h6>
  </div>
  <div class="col-md-2">
    <label for="">Per Hour Rate</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_per_hour_rate[]" class="form-control " required="required">
    </div>
  </div>
  <div class="col-md-2">
    <label for="">Min Hours/Day</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_min_hours_booking[]" class="form-control " required="required">
    </div>
  </div>
  <div class="col-md-2">
    <label for="">Max Hours/Day</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_max_hour_perday[]" class="form-control" required="required">
    </div>
  </div>
</div>

if anyother code is required please ask me.

Possible duplicate of [Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Drew Kennedy, Nov 09 '16 at 13:22
use, `$( document ).on( 'click', '.check_chauffer', function() { alert( 'your code' ); });` — Sravan, Nov 09 '16 at 13:23
You should probably be using a version of jQuery that's a little bit newer than `1.9.1`. That was probably released 10 years ago. — Drew Kennedy, Nov 09 '16 at 13:25
I don't think that version is even compatible with Bootstrap, which it looks like you're using. — Drew Kennedy, Nov 09 '16 at 13:26
`$(".check_chauffer").live("click", function(){ alert(); });`, this is for old versions — Sravan, Nov 09 '16 at 13:26
the above comment is if your `jquery` version is below `1.7` — Sravan, Nov 09 '16 at 13:27
@DrewKennedy - on event is coming from 1.7.2 version onwards the Op using 1.9.1 version that is not an issue — Sudharsan S, Nov 09 '16 at 13:27
@Sravan it says `add_chauffeurrates:1560 Uncaught TypeError: $(...).live is not a function` — Habib Rehman, Nov 09 '16 at 13:28
sorry, you are using Jquery `1.9.1`, `live` will not work for you. — Sravan, Nov 09 '16 at 13:28
@DrewKennedy it turned out that i'm using 1.11 version of jquery, but i have included 1.9 in the snippet — Habib Rehman, Nov 09 '16 at 13:29
@HabibRehman - live is deprecated using on event is good in your context because you using 1.9.1 — Sudharsan S, Nov 09 '16 at 13:29
@Habib, re-check if your cloned checkbox has the same class, — Sravan, Nov 09 '16 at 13:31
yes my cloned checkbox has same class. Every cloned checkbox has same class but different id's — Habib Rehman, Nov 09 '16 at 13:32
also make sure that method is getting called, put it in `document.ready`, or once try the same in browser console. — Sravan, Nov 09 '16 at 13:32

Sravan · Accepted Answer · 2016-11-09T13:38:26.783

2

Your first issue is, you should add a delegate to the event handler.

The .on() method allows you to delegate any desired event handler to: current elements, or any future elements which might be added to the DOM in a later time.

$( document ).on( 'click', '.check_chauffer', function() {
    alert(this.id);
});

The second thing is to make sure you add it in document.ready.

$( document ).ready(function() {
    $( document ).on( 'click', '.check_chauffer', function() {
        alert(this.id);
    });
});

Reference of direct-and-delegated-events

edited Nov 09 '16 at 13:38

answered Nov 09 '16 at 13:35

Sravan

18,467
3
30
54

thanks for skimming the problem with me :) (and someone gave -1 idk why) – Habib Rehman Nov 09 '16 at 13:37
:) glad to help you, I don't know who gave that. – Sravan Nov 09 '16 at 13:38
You probably got a -1 (not me) as the problem has been asked 20 times *today* (possible exageration) for which a simple search would find the issue, – freedomn-m Nov 09 '16 at 14:11

Sudharsan S · Answer 2 · 2016-11-09T13:25:08.520

1

Use Event Delegation for dynamically created attributes and elements in the dom elements.It allows us to attach a single event listener for elements that exist now or in the future. Inside the Event Handling Function.

$(document).on('change', ".check_chauffer", function(){
    alert(this.id);
});

edited Nov 09 '16 at 13:25

answered Nov 09 '16 at 13:22

Sudharsan S

15,336
3
31
49

Couldn't get id of dynamically created checkbox

2 Answers2