jquery combine ready and click event

Question

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

$("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

$("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?

EDIT: Its been brought to my attention that ready event is not applicable for individual DOM's and that load should be used instead. I have tried this but still doesn't work. Only the click event works. I have also tried replacing on with bind and same thing happens.

score 7 · Accepted Answer · edited May 23 '17 at 12:33

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

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).

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

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

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().

$( 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);
});

I wanted to avoid doing it this way because I have multiple DOM's on this page that require this type of behavior. So this would mean me having to create a bunch of `myHandler()` functions and explicitly calling them each twice as you have shown in your example. If that is the only choice then so be it, but it just looks ugly — Raymond Holguin, May 22 '15 at 23:32
@RaymondHolguin - what do you mean "multiple DOMs"? There's only one DOM per document (that contains multiple objects) so I think you'll have to explain more about your actual problem before we can help you best. — jfriend00, May 22 '15 at 23:54
@RaymondHolguin - see the custom option I added to the end of my answer. — jfriend00, May 23 '15 at 00:05

score 3 · Answer 2 · answered May 22 '15 at 23:21

3

You can just imitate the click on ready:

jQuery(document).ready(function () {

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

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

answered May 22 '15 at 23:21

Amen Ayach

4,288
1
23
23

I am trying to avoid do that as it seems sloppy. Also this page has many similar events and doesn't seem good to manually trigger a bunch of click events if I don't have to. – Raymond Holguin May 22 '15 at 23:27

AmmarCSE · Answer 3 · 2015-05-22T23:18:41.600

2

Try using 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, ready is valid for document and shouldn't be used for elements. To get similar functionality, use load

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

edited May 22 '15 at 23:18

answered May 22 '15 at 23:15

AmmarCSE

30,079
5
45
53

As far as I know, the problem with "bind" is that it doesn't bind the event to dynamically added DOM elements, which is ".on" 's advantage. – lucasnadalutti May 22 '15 at 23:17
Unfortunately this doesn't work either. The click works, but now the `ready` portion – Raymond Holguin May 22 '15 at 23:20

score 0 · Answer 4 · answered May 22 '15 at 23:16

From the jQuery docs here: 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.

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

I have tried inside the `document.ready` method as well as outside of it. same result. — Raymond Holguin, May 22 '15 at 23:28

jquery combine ready and click event

4 Answers4