在克隆带有文本框的 html 行时，新文本框的触发器

On clone of html row with text box the trigger for the new textbox

本文关键字：文本 新文本 触发器 行时 html      更新时间：2023-09-26

我正在尝试在单击时创建一个重复的行，重复的行是该 html 表的最后一行，但问题是在新创建的行上，文本框不会触发，因为该类与原始类相同，但在按键时，数字函数添加逗号并检查字母未发生

演示 JS 小提琴

.html：

<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>cell</p>
            </td>
            <td>
               <input name="txtMSExMarCardFee2" type="text"   class="Stylednumber">
            </td>
        </tr>
    </tbody>
</table>
<input type="button" id="btnAdd" value="Add New Row"></button>

.JS

$("#btnAdd").on("click",function(){
var $tableBody = $('#tbl').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();
    $trLast.after($trNew);
});
  String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.replace(new RegExp(search, 'g'), replacement);
};

$('input.Stylednumber').keyup(function() {
  var input = $(this).val().replaceAll(',', '');
  if (input.length < 1)
    $(this).val('0.00');
  else {
    var val = parseFloat(input);
    var formatted = inrFormat(input);
    if (formatted.indexOf('.') > 0) {
      var split = formatted.split('.');
      formatted = split[0] + '.' + split[1].substring(0, 2);
    }
    $(this).val(formatted);
  }
});
function inrFormat(val) {
  var x = val;
  x = x.toString();
  var afterPoint = '';
  if (x.indexOf('.') > 0)
    afterPoint = x.substring(x.indexOf('.'), x.length);
  x = Math.floor(x);
  x = x.toString();
  var lastThree = x.substring(x.length - 3);
  var otherNumbers = x.substring(0, x.length - 3);
  if (otherNumbers != '')
    lastThree = ',' + lastThree;
  var res = otherNumbers.replace(/'B(?=('d{2})+(?!'d))/g, ",") + lastThree + afterPoint;
  return res;
}

>$('input.Stylednumber').keyup函数将事件绑定到当前在 dom 中的元素。如果要将事件绑定到动态创建的元素，则必须指定全局范围（如body），或者在这种情况下可以table#tbl。

$('table#tbl').on('keyup', 'input.Stylednumber', function(){ ... });

这是小提琴：http://jsfiddle.net/kQpfE/268/

相关文章：