javascript - jQuery On click wont fire -
javascript - jQuery On click wont fire -
i have textbox
, checkbox , span
tag. when click on checkbox, should show state in span
tag. when textbox
updated, reinserts checkbox block. when click on checkbox now, fails update state.
i using on
event handler checkbox click event, expect work.
any thought why not working expected?
class="snippet-code-js lang-js prettyprint-override">$('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">'); }
class="snippet-code-html lang-html prettyprint-override"><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>
as you're dynamically creating new checkbox when value changes, need delegate event checkbox assigning non-dynamic ancestor:
$('div[role]').on('change', 'input[type=checkbox]', chg);
note how i've used change
instead of click
more appropriate checkboxes.
in below snippet i've changed $(this).is(":checked")
this.checked
.
class="snippet-code-js lang-js prettyprint-override">$('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">'); }
class="snippet-code-html lang-html prettyprint-override"><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 if want false
should convert istiki
variable string:
$('#upd').html('' + isticki);
javascript jquery
Comments
Post a Comment