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

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元素上来实现，当然这个元素已经存在，然后在触发事件时，查找“十进制”类的元素，如果其中一个是事件的根，则表示就像按键事件已经附加到该事件的真实情况一样。

注：如果要处理事件的元素在DOM中具有共同的祖先，其在层次结构中比document更低，则应该替换它，因为它将更有效。

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

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