Question

我正在处理几乎应该在整个项目中使用的JavaScript文档

它有这样的功能

$('.decimal').each(function () {

    $(this).keypress(function (e) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
            e.preventDefault();
        }
        else if (event.which == 46 || event.which == 44) {
            e.preventDefault();
            if (($(this).val().replace(/[^,]/g, "").length) == 0)
                $(this).val($(this).val() + ",");
        }
        var num = $(this).val().split(",");
        if (num != null && num[1].length >= 2) { e.preventDefault(); }
    });
});

我尝试将其添加到_Layout.cshtml文件中，并且在Views中有效，我的问题在PartialViews中。

在某些视图中，我有一个PartialViews在模态中工作，在那个partialviews中，没有让这个函数工作

我可以再次加载脚本，但我不确定这是一个好习惯

您建议我如何正确加载此功能并应用于所有视图和部分视图？

非常感谢！

Answer 1

现在，使用.each，它会将事件附加到当时创建的每个.decimal DOM元素，但您的子视图可能会在该过程之后创建，因此它们不会被附加那些。

您可能希望使用.on来处理将事件处理程序附加到父级的事件，它将侦听符合条件的任何元素DOM元素，即使在之后创建。 Documentation here

你可以改变：

$('.decimal').each(function () {
    $(this).keypress(function (e) {
        // Handler code here...
    });
});

...成

// Selector does not have to be 'body',
// can be the highest DOM element that
// will potentially have all .decimal elements

$('body').on('keypress', '.decimal', function(e) {
  // Handler code here...
})

Answer 2

部分视图的问题是在运行将keypress事件分配给所有字段的代码后加载这些元素。它只能将事件添加到当时存在的元素中。

你可以再次运行代码，但是你必须小心只针对稍后添加到页面的元素（否则你最终会添加多个事件处理程序）现有的）或删除所有现有的处理程序，然后重新添加它们，但现在包括所有新元素。

更简洁的方法是使用jQuery的“委托事件”语法：

$(document).on("keypress", ".decimal", function(e) {
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
    e.preventDefault();
  } else if (event.which == 46 || event.which == 44) {
    e.preventDefault();
    if (($(this).val().replace(/[^,]/g, "").length) == 0)
      $(this).val($(this).val() + ",");
  }
  var num = $(this).val().split(",");
  if (num != null && num[1].length >= 2) {
    e.preventDefault();
  }
});

这可以通过将事件处理程序放在document元素上，当然已经存在，然后在触发事件时，查找“十进制”类的元素，如果其中一个是事件的根源，就像按键事件已经附加到该事件的真实情况一样。

N.B。如果要处理事件的元素在DOM中具有共同的祖先，其层次结构低于document，则应该替换它，因为它会更有效率。

有关详细信息，请参阅http://api.jquery.com/on/，尤其是标题为“直接和委派事件”的部分。

请注意，您的外部.each()循环不是必需的（从技术上讲，原始代码中也不需要）。这将对具有“十进制”类的任何和所有元素进行操作。

如何以正确的方式包含这个js

2 个答案: