jQuery组合ready和click事件

Question

我有一段相同的代码，可以在“准备就绪”和“单击”事件中运行，但是当我尝试将它们组合起来时，它却不起作用。

$("input[name='reimburse']").on("ready click", function() {
    //some code
});

我认为这与Ready函数有关，因为即使这个也不起作用。

$("input[name='reimburse']").on("ready", function() {
    //some code
});

相反，我必须为Ready功能执行此操作。

$("input[name='reimburse']").ready(function() {
    //some code
});

除了创建另一个JS函数并从两个不同声明的事件中调用该方法之外，我如何实现我的初始代码？为什么调用"on("ready")"不起作用？

编辑： 我注意到"ready"事件不适用于单个DOM，应改用"load"。我尝试过这样做，但仍然不起作用。只有"click"事件起作用。我也尝试将"on"替换为"bind"，结果相同。

- Raymond Holguin

Answer 1

ready事件适用于文档，而不是单个DOM元素。因此，不存在特定的适用于"input[name='reimburse']" DOM元素的ready事件。

如果您想要在页面首次加载和特定点击事件触发时都执行同一函数，那么您可以将公共事件处理代码放入一个命名函数中，然后从两个不同的事件处理程序引用该函数：

function myHandler(e) {
    // code here
}

$(document).ready(myHandler);
$("input[name='reimburse']").on("click", myHandler);

然而，上面的最后一行代码只有在那些DOM元素已经被加载的情况下才能起作用。因此，您可能需要将该行代码放在.ready()处理程序中（这取决于代码从哪里运行）。

$(document).ready(function() {
    $("input[name='reimburse']").on("click", myHandler);
    myHandler();
});

这是另一个相关的回答：jQuery.ready()相当于元素的事件监听器？ 为什么调用on（“ready”）不起作用？

因为jQuery决定不支持该结构。 jQuery曾经支持 $（document）.on（“ready”，handler），但自jQuery v1.8以来，该支持已被弃用（例如，您不应该使用它，因为它将被删除）。根据jQuery文档，可以使用以下三种形式来使用.ready()。

$( document ).ready( handler )
$().ready( handler )             // works, but not recommended
$( handler )

如果你觉得在指定事件处理程序和在初始化时调用函数两者都让人困扰，那么你可以创建自己的插件来为你完成这个过程。

 $.fn.initOn = function(events, handler) {
     this.on(events, handler);
     handler();
 }

然后，不要这样写：

$(document).ready(function() {
    $("input[name='reimburse']").on("click", myHandler);
    myHandler();
});

你可以这样做：

你只需执行以下操作：

$(document).ready(function() {
    $("input[name='reimburse']").initOn("click", myHandler);
});

- jfriend00

---

我本来想避免这种方式，因为我在这个页面上有多个需要这种行为的DOM。这意味着我必须创建一堆myHandler()函数，并像你在示例中所示那样显式地调用它们两次。如果这是唯一的选择，那就这样吧，但它看起来很丑。 - Raymond Holguin

@RaymondHolguin - 你说的“多个DOM”是什么意思？每个文档只有一个DOM（包含多个对象），所以我认为在我们能够最好地帮助你之前，你需要更详细地解释一下你实际的问题。 - jfriend00

@RaymondHolguin - 请看我在答案末尾添加的自定义选项。 - jfriend00

Answer 2

您可以模拟点击“ready”按钮：

jQuery(document).ready(function () {

    $("input[name='reimburse']").click(function() {
        //some code
    });

    $("input[name='reimburse']").click();
});

- Amen Ayach

---

我试图避免这样做，因为它看起来很懒散。此外，该页面有许多类似的事件，如果不必要的话手动触发一堆点击事件似乎不是一个好主意。 - Raymond Holguin

Answer 3

尝试使用bind()函数。

$("input[name='reimburse']").bind("ready click", function() {
    //some code
});

根据文档，

多个事件类型可以同时绑定，只需将每个事件类型用空格分隔即可。

注意，`ready` 适用于 `document`，不应用于元素。要获取类似的功能，请使用 `load`。

$("input[name='reimburse']").bind("load click", function() {
    //some code
});

- AmmarCSE

---

据我所知，“bind”存在的问题是它无法将事件绑定到动态添加的DOM元素上，而这正是“.on”的优势所在。 - lucasnadalutti

很遗憾，这也不起作用。点击是有效的，但现在ready部分没有起作用。 - Raymond Holguin

Answer 4

来自jQuery文档：https://api.jquery.com/ready/

还有$(document).on( "ready", handler )，自jQuery 1.8起被弃用。它的行为方式与ready方法类似，但如果ready事件已经触发并且您尝试执行.on( "ready" )，则绑定的处理程序将不会被执行。以这种方式绑定的准备好的处理程序在上述其他三种方法绑定的之后执行。

虽然尽可能不要使用已弃用的方法，但我很好奇，你把事件监听器设置在哪里了？

- Danny Delott

---

我已经尝试过在document.ready方法内部和外部进行尝试，但结果相同。 - Raymond Holguin