Question

我已经在自己的网站上实施了Knob jquery plugin。我的包含旋钮输入字段的html代码是使用jquery动态生成的。挑战在于文本输入字段不会转换为旋钮转盘。但是，如果我直接将html旋钮代码放入我的php页面，拨号显示就可以了。有谁知道为什么动态html不显示旋钮？请在下面查看我的代码：

包括js文件：

<script src="bower_components/jquery-knob/js/jquery.knob.js"></script>

旋钮配置功能：

$(function () {
/* jQueryKnob */

$(".knob").knob({
  /*change : function (value) {
   //console.log("change : " + value);
   },
   release : function (value) {
   console.log("release : " + value);
   },
   cancel : function () {
   console.log("cancel : " + this.value);
   },*/

  draw: function () {

    // "tron" case
    if (this.$.data('skin') == 'tron') {

      var a = this.angle(this.cv)  // Angle
          , sa = this.startAngle          // Previous start angle
          , sat = this.startAngle         // Start angle
          , ea                            // Previous end angle
          , eat = sat + a                 // End angle
          , r = true;

      this.g.lineWidth = this.lineWidth;

      this.o.cursor
      && (sat = eat - 0.3)
      && (eat = eat + 0.3);

      if (this.o.displayPrevious) {
        ea = this.startAngle + this.angle(this.value);
        this.o.cursor
        && (sa = ea - 0.3)
        && (ea = ea + 0.3);
        this.g.beginPath();
        this.g.strokeStyle = this.previousColor;
        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
        this.g.stroke();
      }

      this.g.beginPath();
      this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
      this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
      this.g.stroke();

      this.g.lineWidth = 2;
      this.g.beginPath();
      this.g.strokeStyle = this.o.fgColor;
      this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
      this.g.stroke();

      return false;
    }
  }
});
/* END JQUERY KNOB */
});

使用jquery创建的动态html：

 for (var i in theConfirmedGuests )
        {
            var evrow = theConfirmedGuests[i];
            var confirmed = evrow['confirmed'];
            var ev_guests = evrow['totalguests'];

            var percentage_tmp = (confirmed/ev_guests)*100;
            var percentage = percentage_tmp.toFixed(0);

$('#output_cal_search').append("<div class='col-xs-6 col-md-3 text-center'> 
<input type='text' class='knob' value='"+percentage+"' data-skin='tron' 
'data-thickness='0.1' data-width='90' data-height='90' data- 
fgColor='#00a65a'><div class='knob-label'>data-thickness='0.1'</div> 
</div>");

最后是html代码：

 <table class="table table-hover">
          <thead>
            <tr>
            <th>&nbsp;</th>
            <th>ID</th>
              <th>Customer</th>
              <th>Start</th>
              <th>End</th>
            </tr>
            </thead>
            <tbody id = "output_cal_search">
           </tbody>
          </table>

如果我直接将其放入php文件，则下面的html代码可以正常工作，该代码与我在dynamich html输出中使用的代码相同：

           <div class="col-xs-6 col-md-3 text-center">
              <input type="text" class="knob" value="10" data-skin="tron" 
         data-thickness="0.1" data-width="90" data-height="90" data- fgColor="#00a65a">

              <div class="knob-label">data-thickness="0.1"</div>
            </div>

Answer 1

您需要初始化动态添加内容上的旋钮。应该这样做，放在.append()之后：

$('input.knob', '#output_cal_search').knob();

请注意第二个参数，表示上下文。当然，您可以重新初始化整个文档：

$('input.knob').knob(); // equivalent to $('input.knob', document).knob()

... if和仅当时，重新初始化所有旋钮没有缺点（不会丢失值，不会引发错误）。

如果#output_cal_search包含旧旋钮和新旋钮，而您无法重新初始化旧旋钮，则唯一的选择是向每个动态添加的容器中添加自定义类（沿needs-init行），并使用该类仅定位新添加的内容：

$('input.knob', '.needs-init').knob();
// and remove the class immediately after:
$('.needs-init').removeClass('needs-init');

我会将旋钮初始化放置在for循环之外（尤其是如果您重新初始化页面中的所有旋钮），但是我想它也将在其中起作用。

为什么旋钮拨盘/ tron CSS无法使用动态HTML

1 个答案: