javascript - buttonset() not working with dynamic inputs -
i'm trying use jquery buttonset() dymanic inputs it's not working:
$(document).ready(function () { var n = 30; (var = 1; <= n; i++) { $('<label/>', { id: "label-" + i, }).append($('<input/>', { type: "checkbox", id: "checkbox-" + })).append(i).prependto("#showchck"); } $("#showchck").buttonset('refresh'); });
only label shown, not input.
edit: add html code:
<div data-role="fieldcontain" id="channels" style="display:none;"> <fieldset id="showchck" data-role="controlgroup" data-type="horizontal"> </fieldset> </div>
label needs for
attribute buttonset work , labels , checkboxes should not nested.
in demo, changed way inputs , labels rendered as per documentation here
documentation says
for association work properly, give input id attribute, , refer in label's attribute. don't nest input inside label, causes accessibility problems.
$(document).ready(function() { var n = 30; (var = 1; <= n; i++) { var $input = $('<input/>', { type: "checkbox", id: "checkbox-" + }); var $label = $('<label/>', { id: "label-" + i, for: "checkbox-" + }).append(i); $("#showchck").append($input).append($label); } $("#showchck").buttonset(); });
$(document).ready(function() { var n = 30; (var = 1; <= n; i++) { var $input = $('<input/>', { type: "checkbox", id: "checkbox-" + }); var $label = $('<label/>', { id: "label-" + i, for: "checkbox-" + }).append(i); $("#showchck").append($input).append($label); } $("#showchck").buttonset(); });
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div data-role="fieldcontain" id="channels" style="display:block;"> <fieldset id="showchck" data-role="controlgroup" data-type="horizontal"> </fieldset> </div>
Comments
Post a Comment