Home Why is an async event handler for a jQuery event not getting called?
Reply: 0

Why is an async event handler for a jQuery event not getting called?

ArtOfCode
1#
ArtOfCode Published in 2018-01-10 19:39:46Z

I'd like to make use of async/await with fetch in response to my user selecting something from an HTML <select> dropdown. To do this, I'm adding an async event handler to the change event of the select element:

import createDebug from 'debug';
const { onLoad } = require('./util');
const debug = createDebug('data_sources');

onLoad(() => {
  const createParserArgsInputs = async (ev) => {
    debug('hi');
    const $target = $(ev.target);
    const id = $target.val();
    debug($target, id);
    const response = await fetch(`/source-types/${id}/details`);
    const details = await response.json();
    debug(details.parser_args);
  };

  $('#data_source_source_type_id').on('change', createParserArgsInputs);
});

onLoad is equivalent to $(document).ready; all of this is preprocessed by Babel before being sent to the browser.

However, when I select something from the dropdown, I get nothing. No logs; no error messages. The network request, however, is fired, and comes back with the expected JSON response - but none of the three logs are logged.

What am I missing? Changing this to a synchronous handler and commenting out the awaits makes the logs appear; is it illegal to have an async function as an event handler?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.260579 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO