CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Sheno
Sheno

Reputation: 19

JQuery Click event loads before change event

I am using a simplified example to describe the issue I am facing.

I have the following HTML markup:

<input ng-model="something" style="margin-top:8px;"/>

And, I have two HTML buttons:

<button id='submit'>Save</button>
    
<button id='btnGetAnalyzerInput'>Generate Analyzer File </button>

I used jQuery's change event on my input (to track whether any changes have been made to the input - by maintaining a simple JS variable).

When the user clicks "Generate Analyzer file button", what I want to is this:

  1. Look up the JS variable to find out whether any changes have been made.
  2. If yes, then prompt the user to save changes (window.dialog)

However, I find that when the focus is still on the input element, and when the button is clicked, the click event runs before the OnChange event. In all other cases, it is the OnChange event which gets fired before the click event (and so my code works as expected).

Is there any way to ensure that for such a scenario, the click event runs after the onChange event?

I am using Google Chrome to test my application.

Note :

  1. Both events work as expected - the OnChange event gets fired when the textbox loses focus.
  2. I can't use the keypress event since I want to track changes.

Upvotes: 0

Views: 1901

Answers (1)

Karl Galvez
Karl Galvez

Reputation: 843

You could have the click event call the same function as the OnChange event. Something like this:

function OnChange(){
  //Do stuff for on change;
}
function ClickEvent(){
  OnChange(); 
  //continue with generate stuff
}

You you may need to set up and pass in arguments to the OnChange function, depending on how you are accessing the data you need. If you need more guidance, post more of your code.

Upvotes: 1

Related Questions