Question

为什么在添加新输入后，js代码中的类.numeric（正常数字格式化）无效？

normal number formatting这种方式是对的吗？你的建议是什么？ 我不想使用插件。

$("input:text.numeric").keyup(function () {
    $val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
    $(this).val($val)
})

尊重

Answer 1

如果在完成加载后向页面添加内容，则需要在脚本上使用live（）函数使它们处理新数据。

如果您执行以下操作：

$('#container').append('<div class="clickme">The text goes here</div>');

或

$('#container').load('script.php');

......他们都被认为是在加入页面。

使用live（），您的代码将成为：

$("input:text.numeric").live('keyup', function () {
    $val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
    $(this).val($val)
});

在此处阅读更多内容：http://api.jquery.com/live/

Answer 2

您需要一个面向未来的事件观察员。由于keyup绑定已分配给现有节点，因此您之后创建的任何节点都不会绑定到该事件。您需要使用live或delegate

更改

$("input:text.numeric").keyup(function () {

到

$("input:text.numeric").live('keyup',function () {

或

$('.find_input').delegate('input:text.numeric','keyup',function () {

delegate()比live()更加资源友好，但您需要提前了解父母。在你的例子中，我推荐它。

工作演示：http://jsfiddle.net/AlienWebguy/zgWr3/4/

Answer 3

使用delegate()^[docs]方法将处理程序绑定到.column容器。

示例： http://jsfiddle.net/zgWr3/3/

$('.column').delegate("input.numeric:text",'keyup',function () {
    $val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
    $(this).val($val)
});

这样，"input.numeric:text"内的任何.column元素都会调用处理程序，而不管它们何时被添加到DOM中。

我也稍微改变了选择器。似乎对我来说更容易理解。

添加新输入后不工作类.numeric。我该怎么办？

3 个答案: