jQuery旋钮释放上的运行功能答案

【问题标题】：Run function on jquery knob releasejQuery旋钮释放上的运行功能
【发布时间】：2013-07-30 18:43:05
【问题描述】：

我有一个计算估算值的表格。我希望销售人员能够使用 jquery-knob 按百分比标记估算值。我已经全部工作了，但是我想在释放旋钮时更改值，或者为此更改任何一个，这样他们就不必再次按下计算按钮。我无法让查询旋钮在发布或更改时触发任何内容，我确定我在这里遗漏了一些非常简单的东西，但它只是让我无法理解。

这是输入元素本身：

<input type="number" name="adjust" id="adjust" value="100" data-min="75" data-max="125" data-step="2" class="dial notstored adjuster" data-width="150" data-cursor=true data-thickness=.4 data-fgColor="#1C5C67" data-inputColor="black" data-bgColor="#FBFBFB"/>

这是我尝试过的一些调用，第一个根本不遵循旋钮自述文件（编辑：我也尝试将这些包装在准备好的文档中）：

<script>
$("#adjust").change(function () {
                alert('monkey')
            });
</script>

这是一个使用旋钮的文档：

<script>
$("#adjust").knob({
                'release' : function () { alert('monkey'); }
            });
</script>

我已经尝试了许多其他不同的论文化身，但这只会使这篇文章比现在更长。感谢您的指导。

编辑：已解决。当您在一个表单中有多个这些并且您根据类调用它们时，但应该在发布时触发某些东西，请确保它是通过 ID 调用并且没有类。

【问题讨论】：

尝试将您的代码包装在一个 DOM 就绪函数 $(document).ready(function() { //your stuff });
@tymeJV - 试过了，谢谢。我也在一个干净的文件中测试所有这些，只是为了确保没有任何冲突。
在这里工作：jsfiddle.net/wewKx 确保您的导入正确，并且您的脚本位于 $(document).ready(function() { } 或位于 input 元素之后。
你输入的所有属性都应该用引号引起来，即使它们不是字符串值。
@cfs 谢谢。我在多页表单中有大约 8 个这样的东西。我是根据类来初始化它们的，但是这个是在 id 上的，虽然我仍然有类，因此没有火灾......我将修复我的属性。再次感谢，不胜感激。

标签： jquery html forms jquery-knob

【解决方案1】：

对不起！我几乎在 2019 年看到了这一点：2020 年！ :D 谢谢安东尼特里恩！ 我真的不喜欢数字输入表单中的微调器，因为很多东西都不能正常工作！

嗯，这是我的设想，这些可以如何取代微调器：（只需将此代码放在适当的 html 文档中，只需单击/推入即可编辑）

    <div class="py-5 text-center pi-draggable" draggable="true">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"> </script> <script>
    var current = null;

    function thisknob(what) {
      target = what;
      if (current != null) resetknob();
      current = $(what).knob({
        min: 0,
        max: 300,
        stopper: true,
        'release': function(v) {
          // console.log('da');
          resetknob();
        }
      });
    }

    function resetknob() {
      value0 = $(current[0]).find('input')[0].value;
      //console.log($(current[0]));
      $(current[0]).parent().html('<input type="text" class="  " data-cursor="true" value="' + value0 + '" onfocus="thisknob(this);" >');
      current = null;
    }
  </script>

【讨论】：