[Solved] Javascript function not firing on click

by


The first (and generally only) argument to an event callback is the event data itself. This is done by the browser JS engine and is not something you can influence or choose yourself.

To get the item clicked on, within the callback context, you can always reference this.

See example below (in order to make a runnable demo I’ve commented out the ajax part, the purpose is to demonstrate the correct use of this).

$(document).on("click", ".employeeComplete", employeeReg);

function employeeReg(event) {
  var self = $(this);
  var stats = {};
  stats['age'] = 'age';
  stats['name'] = name;
  /*        $.post('employee', stats)
          .done(function(e){
              alert("hello");
              if(e){
                  alert("This employee has been registered.");
                  self.attr('disabled', 'disabled');
                  self.css('background-color', '#111111');

              }
              else{
                  alert("Error.");
              }
          })
          .fail(function(){
              alert("Error.");
          });*/

  alert("This employee has been registered.");
  self.css('background-color', '#111111');
  self.attr("disabled", "disabled");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="employeeComplete">Click to test</button>

N.B. Also consider switching “.attr” for “.prop” – see documentation at http://api.jquery.com/attr/ which states: “As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.” . There is also a more detailed discussion of why this is the case.

1

solved Javascript function not firing on click