检测任何输入变化 jquery

Question

我有一个包含多个字段和一些 jquery 模态对话框（弹出窗口）的表单。

如果其中一个字段的值已被用户更改，我需要关闭所有打开的弹出窗口。

我试过了，但它似乎不起作用（change 事件没有触发，我在控制台中没有得到 "test"）：

   $("input[type='text']").change(function () {
       console.log("test");
       $(".ui-dialog-content").dialog("close");
    });

知道如何解决吗？

Answer 1

这只是一个随机猜测，但你试过了吗：

$("input[type='text']”).on('change', function () {
    console.log("test");
    $(".ui-dialog-content").dialog("close");
});

我知道您的解决方案是解决此问题的捷径，它应该可以工作，但我看到了一些可以使用此解决方案而不是捷径的元素。它与元素的创建时间和脚本的加载时间有关。

Answer 2

当您使用 autoOpen false 时有效

$("#dialog-1").dialog({
                      autoOpen: false, // autoOpen to false
                  });

脚本：

$(function () {
              $("#dialog-1").dialog({
                  autoOpen: false, // autoOpen to false
              });
              $("#dialog-2").dialog({
                  autoOpen: false, 
              });
              $("#opener").click(function () {
                  $("#dialog-1").dialog("open");
              });
              $("#opener2").click(function () {
                  $("#dialog-2").dialog("open");
              });
              $("input[type='text']").change(function () { // input changes
                  console.log("test");
                  $(".ui-dialog-content").dialog("close");
              });
          });

HTML:

<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog1!</div>
       <div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog2!</div>
      <button id="opener">Open Dialog</button>
       <button id="opener2">Open Dialog</button>
       <input type="text" id="txt" value="" />

Answer 3

没什么可继续的，但是您知道 change 只在场模糊时触发吗？它不会在您键入时触发。此外，当您绑定处理程序时，元素可能不存在。这可能是因为页面尚未加载，或者某些元素是异步加载的。之后动态添加的元素也不起作用。

要修复前者，请确保您的页面已准备就绪，然后再尝试绑定事件处理程序

$(function() {
  // safe here
});

或者，您可以将处理程序绑定到父级上

$("#parent").on("change", "input[type='text']", function () {
   console.log("test");
});

无论何时将元素添加到父级，这都将起作用。请注意，这会比较慢，因此请避免在顶级元素（例如 body 或 window

上使用它

检测任何输入变化 jquery

Detect any input change jquery

jquery

jquery-ui-dialog