时间戳

首页 > 解决方案 > 如何更改模糊的输入值？

javascript - 如何更改模糊的输入值？

问题描述

我有一个链接作为“添加更多”，它可以添加任意数量的输入元素。我想为此调用模糊功能。

单击“添加更多”链接时添加以下 html：

<input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="">

Blur 事件仅适用于默认情况下存在于 DOM 中的第一个元素。当我添加新元素时，模糊事件不会绑定到元素。

以下是javascript代码。

$(document).ready(function() {
    $(".timetoadd").blur(function(){
    this.value = parseFloat(this.value).toFixed(2);
    });
)};

它位于名为 backend.js 的单独文件中。我正在使用 webpack 来缩小文件，它包含在 html 文件中。

怎么做？请帮帮我。

标签： javascripthtml

解决方案

在父元素上使用 jQuery 的on()方法，并带有一个额外的选择器作为第二个参数：

$(document).ready(function() {
  $("#btnAdd").click(function() {
    $('<br/><input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="">').appendTo(document.body);
  });

  $(document.body).on('blur', '.timetoadd', function(){
    this.value = parseFloat(this.value).toFixed(2);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btnAdd">Add more</button>
<br/><input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="">

除了document.body，您还可以使用包含输入的任何其他父级。

推荐阅读