Tengo este código y estoy tratando de llamar a una función, pero no funciona. ¿Alguien puede decirme qué debo hacer para solucionar esto?
$(document).ready(function() { function BoxMsg(mess) { $.MessageBox(mess); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input id="rxc021" name="rxc021" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc021 - option 1')"> <input id="rxc022" name="rxc022" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc022 - option 2')"> <input id="rxc023" name="rxc023" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc023 - option 3')"> <input id="rxc024" name="rxc024" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc024 - option 4')">Para las funciones a las que hacen referencia los atributos onclick , deben colocarse en el ámbito global. Como su función está definida en document.ready, no está dentro del alcance. Para solucionar el problema, mueva la definición de su función:
function BoxMsg(mess) { $.MessageBox(mess); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-message-box@3.2.2/dist/messagebox.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-message-box@3.2.2/dist/messagebox.min.css" /> <input id="rxc021" name="rxc021" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc021 - option 1')"> <input id="rxc022" name="rxc022" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc022 - option 2')"> <input id="rxc023" name="rxc023" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc023 - option 3')"> <input id="rxc024" name="rxc024" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc024 - option 4')"> Mejor aún, no uses onclick . Está desactualizado y no es una buena práctica.
La mejor alternativa es usar controladores de eventos discretos vinculados a su código JS, no al HTML. Puede usar atributos de data para recuperar metadatos de elementos dentro de estos controladores de eventos:
jQuery($ => { $('.e-btn').on('click', e => { let $btn = $(e.target); $.MessageBox($btn.data('message')); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-message-box@3.2.2/dist/messagebox.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-message-box@3.2.2/dist/messagebox.min.css" /> <input id="rxc021" name="rxc021" type="button" class="e-btn e-btn-border" value="Ask" data-message="rxc021 - option 1" /> <input id="rxc022" name="rxc022" type="button" class="e-btn e-btn-border" value="Ask" data-message="rxc022 - option 2" /> <input id="rxc023" name="rxc023" type="button" class="e-btn e-btn-border" value="Ask" data-message="rxc023 - option 3" /> <input id="rxc024" name="rxc024" type="button" class="e-btn e-btn-border" value="Ask" data-message="rxc024 - option 4" />