javascript - AutoNumeric - 在 Ajax 调用后设置一个值

Question

我使用这个插件:https://github.com/autoNumeric/autoNumeric

我使用这个初始化:

AutoNumeric.multiple('.autonumeric-number', AutoNumericConfigDecimal);
AutoNumeric.multiple('.autonumeric-integer', AutoNumeric.getPredefinedOptions().integerPos);

然后，我有一个 Ajax 调用，我需要设置输入的新值。问题是:我无法使用插件的 .set() 方法，因为它需要在初始化后获得一个变量。

由于我使用多个选择器，因此无法使用此变量。

现在，我尝试再次初始化:

// element already has mask
<input id="element" class="autonumeric-integer" />

// after ajax call
var element = new AutoNumeric('#element', AutoNumericConfig);
element.set(value);

但是它使我在输入中写入的内容加倍，“2”变成“22”。

是否可以仅使用 DOM 元素来使用 AutoNumeric 函数？而不是初始化后得到的变量？

Answer 1

从文档中我看到有一个静态方法用于查找处理名为 getAutoNumericElement 的元素的 AutoNumeric 实例。

因此，如果您有 id 或对所需节点的引用，则可以将其传递给此方法，然后可以对其调用 set() 。

AutoNumeric.multiple('.autonumeric-integer', AutoNumeric.getPredefinedOptions().integerPos);


document.querySelector('button').addEventListener('click', function(){
// assuming you can target the elements based on id
  const element = AutoNumeric.getAutoNumericElement('#element3')
  element.set(13);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.1.0/autoNumeric.min.js"></script>

#element1: <input id="element1" class="autonumeric-integer" /><br/>
#element2: <input id="element2" class="autonumeric-integer" /><br/>
#element3: <input id="element3" class="autonumeric-integer" /><br/>
#element4: <input id="element4" class="autonumeric-integer" />

<button> update #element3 </button>