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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -