JavaScript Click event doesn’t work in the first click, why?

The javascript onclick event function executes a certain action or functionality when a button is clicked. This could be when a user(customer) submits a formpage , when you change certain content on the web page, and other things like that.

You place the JavaScript onclick button function you want to execute or run inside the opening tag of the button.

Syntax:

<element onclick="functionToExecute()">Click</element>

Example:

<button onclick="functionToExecute()">Click</button>

CODE:

$(document).on( 'click', '.classname', function () { 
alert('clicked');
});

**** Another Method ****
// where #wrapper is a static element in which you add the dynamic links.
$( '#wrapper' ).on( 'click', 'a', function () { alert('clicked'); });

Example:

Button HTML:

<input id="btnSearch" onclick="GetInfo();" type="button" value="Find ID" class="button-ffe" />

Click code:

function GetInfo() {
var term = $('#txtUtente').val();
$('#btnSearch').click(function () {
var winW = window.innerWidth;
var winH = window.innerWidth;
var dialogoverlay = document.getElementById('dialogoverlay');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH + "px";

$.ajax({
     url: 'DAL/WebService1.asmx/GetPTSID',
     method: 'post',
     contentType: 'application/json;charset=utf-8',
     data: JSON.stringify({ term: term }),
     dataType: 'json',
     success: function (data) {
       document.getElementById('dialogoverlay').style.display = 'none';

       $('#infoFoundID').html(data.d[0]);
       $('#foundInfoMessage, #userInformation').show();
       $('#registerProductInfo').hide(); 
       var partTable = $('#partTable tbody');

       $(data.d).each(function (index, id) {
          partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
         });
       },
       error: function (err) {
       console.log(err);
     }
   });
 });
} //end getinfo

You can remove the first function definition :

var term = $('#txtUtente').val();

$('#btnSearch').click(function () {

var winW = window.innerWidth;
var winH = window.innerWidth;
var dialogoverlay = document.getElementById('dialogoverlay');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH + "px";

$.ajax({
     url: 'DAL/WebService1.asmx/GetPTSID',
     method: 'post',
     contentType: 'application/json;charset=utf-8',
     data: JSON.stringify({ term: term }),
     dataType: 'json',
     success: function (data) {
       document.getElementById('dialogoverlay').style.display = 'none';

     $('#infoFoundID').html(data.d[0]);
     $('#foundInfoMessage, #userInformation').show();
     $('#registerProductInfo').hide(); 
      var partTable = $('#partTable tbody');

       $(data.d).each(function (index, id) {
        partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
       });
      },
      error: function (err) {
      console.log(err);
    }
  });
});