Pass value to parameter of a function called inside a JQuery onClick event and evaluate it correctly-CodePudding

I came across this bizarre behaviour while trying to assign a value to a parameter of a function that is then reused inside onClick event and in other parts of my code.

I have a function fctClearAllInputs that clears values from input and has to show a confirmation popup depending on where it's called from.

When fctClearAllInputs(true) is called inside $("#idBtnCallClearFunction") onClick event, the parameter blnClearWithoutConfirmation is evaluated to true correctly.

However, when fctClearAllInputs is called inside $(".clearAllInputs") onClick event, its parameter blnClearWithoutConfirmation is an object and is not properly evaluated (an object value is truthy in JS: !!{} == true).

Setting a default value for blnClearWithoutConfirmation to false is ignored

If I change fctClearAllInputs to fctClearAllInputs(false) inside $(".clearAllInputs"), then the parameter blnClearWithoutConfirmation is correctly set to false, but the buttons with class clearAllInputs are not clickable anymore.

What is this behaviour and how can I pass a value to a parameter of a function called inside a JQuery event and evaluated it correctly inside my function ?

See code below

$(document).ready(function() {
  const fctClearAllInputs = function (blnClearWithoutConfirmation = false) {
    console.log(`blnClearWithoutConfirmation: '${JSON.stringify(blnClearWithoutConfirmation)}'`);
    console.log(`Convert to bool: '${!!blnClearWithoutConfirmation}'`);

    //blnClearWithoutConfirmation inside 'fctClearAllInputs(false)' is true but button will not be clickable

    //blnClearWithoutConfirmation inside 'fctClearAllInputs' is an object evaluated to true but button will be clickable

    //...

    // blnClearWithoutConfirmation==true => clear inputs without confirmation popup
    if (!!blnClearWithoutConfirmation) {
      // clear inputs
    }
    // blnClearWithoutConfirmation==false => show confirmation popup then clear if user accepts
    else {
      // show popup
      // clear inputs
    }
  };

  // set onclick event to all buttons with class 'clearAllInputs'
  $(".clearAllInputs").on("click", fctClearAllInputs); //fctClearAllInputs(false)

  // button to call clear function and also do other things
  $("#idBtnCallClearFunction").on("click", function() {
    // DO THINGS

    fctClearAllInputs(true);

    // DO OTHER THINGS
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button >Clear All Inputs #1</button> &nbsp;&nbsp;&nbsp;
<button >Clear All Inputs #2</button>

<br/><br/><br/><br/>

<button id="idBtnCallClearFunction">
  Call Clear Function
</button>

CodePudding user response：

jQuery passes the Event object as the argument when it calls the function directly, so the default won't be used. You should use your own anonymous function like you do in the other handler.

// set onclick event to all buttons with class 'clearAllInputs'
$(".clearAllInputs").on("click", function() {
  fctClearAllInputs.bind(this)()
}); //fctClearAllInputs(false)

// button to call clear function and also do other things
$("#idBtnCallClearFunction").on("click", function() {
  // DO THINGS

  fctClearAllInputs.bind(this)(true);

  // DO OTHER THINGS
});