Unable to call a jQuery function on button click

Question

Am trying calling a jQuery function while clicking the save button. But i didn't get any response while clicking the button.

<button type="button" id="save" class="btn btn-primary pull-right">Save Expense</button>

$('#save').on('click', function() {
  alert("test");
  var data = $('form').serialize();
  console.log("data" + data);
  $.ajax({
    type: "POST",
    url: "saveExpense",
    data: data,
    cache: false,
    success: function(data) {
      alert("Success");
    }
  });
});

Answer 1

Create a click event like this , this will solve your problem.

 $(document).on('click','#save', function() { alert("test"); var data = $('form').serialize(); console.log("data" + data); $.ajax({ type: "POST", url: "saveExpense", data: data, cache: false, success: function(data) { alert("Success"); } }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="save" class="btn btn-primary pull-right">Save Expense</button>