jQuery On click wont fire

Question

I have a textbox, a checkbox and a span tag. When I click on the checkbox, it should show its state in the span tag. When textbox is updated, it reinserts the checkbox block. When you click on the checkbox now, it fails to update the state.

I am using the on event handler for checkbox click event, so I expect it to work.

Any idea why this is not working as expected?

$('div[role] input[type=checkbox]').on('click', chg);

$('div[role] input[type=text]').on('input', sourceChanged);

function chg() {
  var istiki = $(this).is(":checked");
  $('#upd').html(istiki);
}

function sourceChanged() {
  $('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
  <input type="text" class="form-control" />
  <span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>

You are appending a new checkbox over the old one and that makes it a new element that was not in the DOM when you set the handler. This goes to http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Spokey, Oct 10 '14 at 08:57
possible duplicate of [Event delegate issue for dynamically added element in jquery](http://stackoverflow.com/questions/21019617/event-delegate-issue-for-dynamically-added-element-in-jquery) — T J, Oct 10 '14 at 08:58
Out of curiosity, the `.input-group` already has a checkbox, then why are you doing this - `$('span', $(this).closest('.input-group')).html('');`? — T J, Oct 10 '14 at 09:03
Would you guys even read the question before littering with comments? I know I am adding new elements. I wrote that. I wrote I used `on` event too. I was just wrong with the syntax. The non-dynamic ancestor is what I was after. — Null Head, Oct 10 '14 at 09:12
This is for demo purpose only TJ. I have slightly more complex stuff happening in there. — Null Head, Oct 10 '14 at 09:18

score 2 · Accepted Answer · answered Oct 10 '14 at 08:55

As you're dynamically creating a new checkbox when the value changes, you need to delegate the event to your checkbox by assigning it to a non-dynamic ancestor:

$('div[role]').on('change', 'input[type=checkbox]', chg);

Note how I've used change instead of click as this is more appropriate for checkboxes.

In the below snippet I've also changed $(this).is(":checked") to just this.checked.

$('div[role]').on('change', 'input[type=checkbox]', chg);

$('div[role] input[type=text]').on('input', sourceChanged);

function chg() {
  var istiki = this.checked;
  $('#upd').html(istiki);
}

function sourceChanged() {
  $('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
  <input type="text" class="form-control" />
  <span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>

Note also that if you want it to say false you should convert your istiki variable to a string:

$('#upd').html('' + isticki);

You need to... because you're inserting a new checkbox, the original one to which you binded the event is no longer there. — Ruben Serrate, Oct 10 '14 at 08:57
Thanks James. Din't know I should put dynamic stuff on the right side. — Null Head, Oct 10 '14 at 09:16

jQuery On click wont fire

1 Answers1