如何同时使用 $(document).ready(function() 和另一个事件函数来运行 Javascript/Jquery 函数？答案

【问题标题】：How to run a Javascript/Jquery Function using both $(document).ready(function() and Another Event Function?如何同时使用 $(document).ready(function() 和另一个事件函数来运行 Javascript/Jquery 函数？
【发布时间】：2021-03-12 13:29:26
【问题描述】：

我不是 javascript/jquery 编码器，不确定我想要做的事情是否可行。

我有一个 html/php/ajax 表单，当用户填写它时，它会更新一个 sql 数据库。当他们填写表格时，有一个由 javascript/jquery 运行的进度条，它会随着用户输入的内容而更新。函数的开头是这样的：

$("#update input").keyup(function() {

这很好用。我的问题是页面重新加载时。我的代码正在从数据库中提取 sql 数据，以填充页面上每个输入的值，以便用户稍后可以返回并完整填写表单。当用户重新加载页面时，脚本激活的唯一方法是用户在输入字段中键入内容。

我想我可以通过使用 $(document).ready(function() 更改我的初始 javascript/jquery 函数来解决此问题。这导致脚本仅在页面加载时运行，而不是在填写表单时运行。我需要脚本在准备好的页面上运行，以及当用户输入填充的输入时。有没有办法同时运行$(document).ready(function() 和$("#update input").keyup(function() {？或者有更好的理由来做到这一点吗？谢谢！

如果我需要发布更多代码，请告诉我。

【问题讨论】：

抱歉，我需要更新...脚本无法运行。有了文档准备功能，它只运行一次就结束了。但它会在页面加载时完成我想要它做的事情。使用 keyup 功能，它可以在用户输入输入时工作，但是在使用此功能时，当页面重新加载时，必须输入输入字段以便脚本在整个页面中更新。
如果你想在多个事件中执行同一个函数，你可以声明一个函数，并在附加事件时传递对该函数的引用，而不是定义一个匿名函数。
可以使用内联onkeyup函数
你也可以在分配监听器后触发()事件
这能回答你的问题吗？ jQuery multiple events to trigger the same function

标签： javascript jquery document-ready keyup

【解决方案1】：

这是一种将声明的函数附加到事件的通用方法。

function handler (e) {}
element.addEventListener('click', handler);

您可以在任何地方调用handler，也可以在$(document).ready 内部调用，或者如果您的DOMReady 处理程序中没有其他代码，您可以将引用作为参数传递：

$(document).ready(handler);

在您的具体情况下，您很可能想要这样的东西：

$(document).ready(function () {
  function handler (e) {...}
  handler();
  $("#update input").keyup(handler);
});

如果处理函数使用事件对象（示例中为e），在现代浏览器中它也可用作全局event 对象，或在jQuery 中为e.originalEvent。如果没有触发事件，则该对象不存在，但是，在这种情况下，如果需要，您必须将包含提供的属性的假事件对象传递给处理程序。

【讨论】：