Prevent double on.click event Javascript-CodePudding

i'm still new in using java script, i try to make trigger time when first input field get click, then the function trigger will active, the problem every time i click input field, the triggger always active again, i try using

event.preventDefault();

but it's didn't work, please help me where i do it wrong ? this my code

 $('#trigger').on("click", function(e) {
 e.preventDefault();
        var timeleft = 1;
        var downloadTimer = setInterval(function(){ document.getElementById('countdown').value = `${timeleft} seconds`;
            timeleft  = 1;
        }, 1000);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="trigger"  required>
    <input type="text" id="countdown"  required>

edit : i try it like this, but its still haunt me if is this the best method?

 function myFunction() {
        var timeleft = 1;
        var downloadTimer = setInterval(function() {
            document.getElementById('countdown').value = `${timeleft} seconds`;
            timeleft  = 1;
        }, 1000);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" id="trigger" onclick="myFunction(); this.onclick=null;"  required>
    <input type="text" id="countdown"  required>

CodePudding user response：

You can use focusout event of Textbox

$( "#trigger" )
  .focusout(function() {
   myFunction();
  });

and after focusout you can disable Textbox