Call jQuery function from HTML

Question

I have this code and I am trying do call a function, but it doesn't work. Can anyone tell me what I need to do to fix this?

$(document).ready(function() {
  function BoxMsg(mess) {
    $.MessageBox(mess);
  }
});

user_519413 · Answer

For functions referenced by onclick attributes they need to be placed in global scope. As your function is defined in document.ready, it's not in scope. To fix the problem, move your function definition:

function BoxMsg(mess) {
  $.MessageBox(mess);
}

Better still, do not use onclick. It's outdated and not good practice.

The better alternative is to use unobtrusive event handlers bound in your JS code, not the HTML. You can use data attributes to retrieve element metadata within these event handlers:

jQuery($ => {
  $('.e-btn').on('click', e => {
    let $btn = $(e.target);
    $.MessageBox($btn.data('message'));
  });
});

Call jQuery function from HTML

1 Answers