CODEWITHSUNDEEP
javascriptjquery
Raymond Holguin
Raymond Holguin

Reputation: 1122

jquery combine ready and click event

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.

Upvotes: 4

Views: 16919

Answers (4)

jfriend00
jfriend00

Reputation: 707556

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

Upvotes: 7

Amen Ayach
Amen Ayach

Reputation: 4348

You can just imitate the click on ready:

jQuery(document).ready(function () {

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

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

Upvotes: 3

AmmarCSE
AmmarCSE

Reputation: 30567

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

Upvotes: 2

Danny Delott
Danny Delott

Reputation: 6998

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?

Upvotes: 0

Related Questions