.change() handler make form require two clicks to submit

Question

I have a text area that has a .change() handler bound to it. Upon change, it forces an ajax call to save some data. In another part of the page, there is also a form with a submit button.

The desired behavior is that if the user types in the text area, then mouses over the submit button and clicks, the ajax call is made, then the form is submitted.

What appears to be happening is that the click on the button triggers the change() event, but no click happens.

Any recommended ways around this?

Update:

$('#content').click(function(event) {
  console.log("content clicked");
});

$('input#order_is_gift').change(function() {
  console.log("change", event);
  f.cart.set('is_gift', $('input#order_is_gift').prop('checked'));
  f.cart.save();
});

$('textarea#order_gift_text').change(function(event) {
  console.log("change", event);
  f.cart.set('gift_text', $('textarea#order_gift_text').val());
  f.cart.save();
});

Further info: I think the issue is basically the one addressed here: Blur event stops click event from working?

In a best case, I would block until the save() returns, which might solve the problem.

Answer 1

Use this-

$('#content').mousedown(function(event) {
  console.log("content clicked");
});

Instead of this-

$('#content').click(function(event) {
  console.log("content clicked");
});