时间戳

首页 > 解决方案 > 如何动态地将文本框连接到 jquery 事件？

javascript - 如何动态地将文本框连接到 jquery 事件？

问题描述

我有一个在编辑日期字段时使用 jquery 的应用程序。它适用于所有具有 css 类“日期”的字段。我正在将一些 HTML 代码从服务器读取到一个用作弹出窗口的 DIV 中。HTML 代码包含几个日期字段，我也想让 jquery 管理这些字段。该页面在下面的 head 元素中粘贴了代码，jquery 会自动附加到相应的字段。我需要在弹出窗口出现时向 jquery 添加字段，并在弹出窗口关闭时删除它们。搜索答案时，我只能找到 jquery 创建文本框的位置，但不能附加到现有文本框。

  <script src="Include/jquery-latest.js" type="text/javascript"></script>
  <script src="Include/jquery.maskedinput.js" type="text/javascript"></script>
  <script type='text/javascript'>
    $(function () {
      // Define your mask (using 9 to denote any digit)
      $('.phone').mask('(999)999-9999');
    });
    $(document).ready(function () {
      $('.phone').change(function () {
        var validnum = $(this).val().match(/^([01]?[0-9]|[0-9]|[0-9])[0-9]|[0-9]|[0-9]-[0-9]|[0-9]|[0-9]|[0-9]$/);
        if (!validnum) {
          $(this).val('').focus().css('background', '#fdd');
          alert('Please enter a valid Phone Number (999)999-9999.');
        } else {
          $(this).css('background', 'transparent');
        }
      });
    });
    $(function () {
      // Define your mask (using 9 to denote any digit)
      $('.date').mask('99/99/9999');
    });
    $(document).ready(function () {
      $('.date').change(function () {
        var validnum = $(this).val().match(/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/);
        if (!validnum) {
          $(this).val('').focus().css('background', '#fdd');
          alert('Please enter a valid Date mm/dd/yyyy.');
        } else {
          $(this).css('background', 'transparent');
        }
      });
    });
  </script>

标签： javascripthtmljquery

解决方案

为什么您的解决方案不起作用？

通过使用$('.date').change(...jQuery 将事件侦听器附加到 DOM 中的所有元素，在您执行此函数的那一刻。随着您的模态稍后添加，它不会收到侦听器。

解决方案：$(document).on('change', '.date', function () { ...

通过使用它，您将事件侦听器附加到文档根目录，因此每次文档中的任何内容发生更改时，jQuery 都会检查更改的元素是否与您作为第二个参数提供的选择器匹配（在本例中.date）。因此，所有元素，即使是稍后添加到页面的元素，也会对更改做出反应。
但是：正如我所说，您在文档中附加了一个侦听器。由于 jQuery 在后台使用 shadow-DOM，它不会消耗太多性能，但是如果您构建一个包含许多此类侦听器的大型应用程序，您可能会在某些时候遇到性能问题。在这种情况下，您最好将侦听器专门添加到您刚刚添加的元素中。

推荐阅读