jQuery .hide（）导致第2个按钮的幽灵touchstart“单击”

Question

I have two buttons on a page, I need to hide a "calculate" button so that it is not clicked again and again, but rather users select a "reset" button.

This works great if both buttons are showing but if I hide the calculate button, once it has completed its work, it somehow is automatically executing the reset button even though the reset button is not being clicked.

This only happens on touch devices . This works fine if it is run from a browser. It is only the touch devices (ex. iPhone) where the issue is occurring. Any clues? I am using jquery-2.1.1.min

Here is my calculate button:

$(document).on( 'touchstart click' ,  '#calculate' ,  function  () {
// do stuff
//hide button now that we are done so users don't keep clicking
$( '#calculate' ).hide();
});

Here is my reset button:

$(document).on( 'touchstart click' ,  '#reset' ,  function  () {
$( "input.form-control" ).val(0);
});

Here is my working example:

http://investingcalculator.azurewebsites.net/

Answer 1

Did you try without delegating?

$('#calculate').on( 'touchstart click',  function  () {
// do stuff
//hide button now that we are done so users don't keep clicking
$( '#calculate' ).hide();
});

$('#reset').on( 'touchstart click',  function  () {
  $( "input.form-control" ).val(0);
});

Answer 2

It ends up that I didn't need the touch start. This is working:

$('#calculate').on( 'click',  function  () {
// do stuff
//hide button now that we are done so users don't keep clicking
$( '#calculate' ).hide();
});

$('#reset').on( 'click',  function  () {
$( "input.form-control" ).val(0);
});