javascript jquery结合准备和点击事件

jquery combine ready and click event

提问by Raymond Holguin

So i have the same piece of code that runs for both Ready and Click events, but when I try to combine them it doesn't work

所以我有一段代码可以同时运行 Ready 和 Click 事件，但是当我尝试组合它们时它不起作用

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

I think it has to do it the Ready function because even this doesn't work

我认为它必须使用 Ready 功能，因为即使这样也不起作用

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

Instead I have to do this for Ready functionality

相反，我必须为就绪功能执行此操作

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

Other than creating another JS function and calling that method from 2 different declared events, how can I achieve my initial code? Why doesn't calling on("ready")work?

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

EDIT: Its been brought to my attention that readyevent is not applicable for individual DOM's and that loadshould be used instead. I have tried this but still doesn't work. Only the clickevent works. I have also tried replacing onwith bindand same thing happens.

编辑：我注意到ready事件不适用于单个 DOM，load应该使用它。我试过这个，但仍然不起作用。只有click事件有效。我也试过用替换on，bind同样的事情发生了。

回答by jfriend00

The readyevent applies to the document, not to individual DOM elements. So, there is no specific readyevent that applies to the "input[name='reimburse']"DOM elements.

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

If what you're trying to do is to have the same function fire both when the page is first loaded and when a specific click event is fired, then you can put your common event handling code into a named function and then refer to that function from two separate event handlers:

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

function myHandler(e) {
    // code here
}

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

Though, the last line of code above will only work IF those DOM elements are already loaded. As such, you may need to put that line of code inside a .ready()handler (depending upon where the code is being run from).

尽管如此，上面的最后一行代码只有在那些 DOM 元素已经加载的情况下才能工作。因此，您可能需要将该行代码放在.ready()处理程序中（取决于运行代码的位置）。

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

Here's another related answer: jQuery.ready() equivalent event listener on elements?

这是另一个相关的答案：jQuery.ready() 元素上的等效事件侦听器？

Why doesn't calling on("ready") work?

为什么调用（“就绪”）不起作用？

Because jQuery decided not to support that structure. jQuery used to support $(document).on( "ready", handler ), but as of jQuery v1.8, that support has been deprecated (e.g. you shouldn't use it because it will be removed). Per the jQuery documentation, these three forms can be used for .ready().

因为 jQuery 决定不支持该结构。jQuery 曾经支持$(document).on( "ready", handler )，但从 jQuery v1.8 开始，该支持已被弃用（例如，您不应使用它，因为它将被删除）。根据jQuery 文档，这三种形式可用于.ready().

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

---

---

If it is bothering you to have to both specify an event handler and call your function at initiatialization time, then you could create your own plug-in that would do that for you:

如果您不得不在初始化时指定事件处理程序并调用您的函数让您感到困扰，那么您可以创建自己的插件来为您执行此操作：

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

Then, instead of this:

然后，而不是这样：

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

You could just do this:

你可以这样做：

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

回答by Amen Ayach

You can just imitate the click on ready:

你可以模仿一下ready的点击：

jQuery(document).ready(function () {

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

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

回答by AmmarCSE

Try using bind()

尝试使用bind()

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

According to the documentation

根据文档

Multiple event types can be bound at once by including each one separated by a space

通过包含以空格分隔的每个事件类型，可以一次绑定多个事件类型

Note, readyis valid for documentand shouldn't be used for elements. To get similar functionality, use load

请注意，对元素ready有效document且不应用于元素。要获得类似的功能，请使用load

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

回答by Danny Delott

From the jQuery docs here: https://api.jquery.com/ready/

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

There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8. This behaves similarly to the ready method but if the ready event has already fired and you try to .on( "ready" ) the bound handler will not be executed. Ready handlers bound this way are executed after any bound by the other three methods above.

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

While you shouldn't be using deprecated methods whenever possible, I'm curious, where are you setting your event listeners?

虽然您不应该尽可能使用已弃用的方法，但我很好奇，您在哪里设置事件侦听器？