How to avoid triggering false function between change and click

Question

I have an input and a clear button. If the user type something in the input field and blur it, change() will be trigger and do something. But if I want to click clear button and trigger click(), change() will still be triggered. How do I solve this?

I tried this, but it doesn't work. var clear will never be true.

$("#inputid").change(function() {
  var clear = false;
   $("#clearbtn").click(function() {
     // if clear button is clicked, do something
     clear = true;
   });
   if (clear) {
     return;
   }

   // if clear button is not clicked, do something else
...

Why are you attaching a new event handler in the `change` event handler function? — Satpal, Aug 24 '20 at 08:20
@Satpal I am new to web development and not quite sure what to do to handle this. Is there a better way? — keanehui, Aug 24 '20 at 08:29
@Satpal If I put `click` outside of `change`, `change` will always be triggered, not `click` — keanehui, Aug 24 '20 at 08:38
Take a look at [this answer](https://stackoverflow.com/a/10270535/1685196) `change()` seems to fire only after a `blur()`. And by clicking a button, you `blur` the input. So if you really want to track every keystroke, use `keyup()` — Michel, Aug 24 '20 at 08:44
Can you describe what you're trying to achieve - not click to trigger click(), but what the user will see/do. Why would the "clear" button stop the input? (as I read from your code this is what would happen) This might be better with a tickbox — freedomn-m, Aug 24 '20 at 08:59
"change will still be triggered" - add some console.logs to all your event handlers and watch what's happening - `change` occurs *before* `click`. — freedomn-m, Aug 24 '20 at 09:05

score 1 · Answer 1 · answered Aug 24 '20 at 08:38

1

You should move the click event outside of the change event.

$("#clearbtn").click(function() {
  // if clear button is clicked, do something
  $("#inputid").val("");
});

answered Aug 24 '20 at 08:38

Samu

126
1
1
4

Hi. Yes I tried this. But `change` will always be triggered, no matter I click clear `button` or somewhere else to blue the input – keanehui Aug 24 '20 at 08:39
That is correct. You should check the value of "#inputid" at the beginning of the "change" event. if its not empty, then proceed with the rest of the function. – Samu Aug 24 '20 at 08:43
1

I made a quick fiddle for you: [Fiddle](https://jsfiddle.net/6gqad79s/) – Samu Aug 24 '20 at 08:59

Nitin Sawant · Accepted Answer · 2020-08-24T09:06:25.940

this is quite tricky
the problem is onchange event is called before the clear button click event is called
to overcome this you can introduce a timer in the onchange event so that it waits for user's immediate action
like this:

$(document).ready(function(){
  var clear = false;
  var isTimerOn = false;
  function HandleChange(){
    if(clear){
     // if clear button is clicked, do something
     $("#inputid").val("");
    }else{
     // if clear button is not clicked, do something else
     alert("do something else");
    }
    clear = false;
    isTimerOn = false;
  }
  
    $("#inputid").change(function() {
    isTimerOn = true;
    setTimeout(HandleChange, 80);
  });
   
   $("#clearbtn").click(function() {
     clear = true;
     if(!isTimerOn){
        HandleChange();
     }
   });
});

here's fiddle: https://jsfiddle.net/6d9r1qsc/

How to avoid triggering false function between change and click

2 Answers2