{"id":7322,"date":"2019-06-13T11:29:51","date_gmt":"2019-06-13T11:29:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7322"},"modified":"2019-06-13T11:55:27","modified_gmt":"2019-06-13T11:55:27","slug":"usar-funciones-en-lugar-de-eventos-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/","title":{"rendered":"Usar funciones en lugar de eventos con jQuery"},"content":{"rendered":"<p>En esta entrada pretendo dar a conocer un detalle t\u00e9cnico muy interesante que te va a sacar de m\u00e1s de un apuro en tus momentos de desarrollado con <strong>JavaScript<\/strong> o <strong>jQuery<\/strong>.<\/p>\n<p><strong>jQuery<\/strong> dispone de distintos m\u00e9todos que permiten capturar eventos tales como el click del rat\u00f3n, el pasar por encima el rat\u00f3n, el cambiar el valor de un selector, etc.<\/p>\n<p>Todos estos eventos son muy \u00fatiles en la mayor\u00eda de ocasiones para controlar las acciones que puede hacer el usuario en una p\u00e1gina Web.<\/p>\n<p>Los eventos en <strong>JavaScript<\/strong> son instrucciones que permiten variar el estado de un elemento o de una p\u00e1gina despu\u00e9s de una acci\u00f3n. Esta acci\u00f3n puede ser accionada por el usuario o llevarse a cabo de forma autom\u00e1tica desde el c\u00f3digo <strong>JavaScript<\/strong>.<\/p>\n<p>Cuando un evento ocurre, la funci\u00f3n correspondiente se ejecuta mostrando alg\u00fan cambio o resultado en pantalla.<\/p>\n<p>Actualmente, los eventos en <strong>jQuery<\/strong> se escriben con el prefijo \u00abon\u00bb, como por ejemplo:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.event'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"co1\">\/\/tu c\u00f3digo aqu\u00ed<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Al pulsar en un enlace, bot\u00f3n o elemento que contenga la clase \u00abevent\u00bb se proceder\u00e1 a ejecutar tu c\u00f3digo.<\/p>\n<p>Cada evento indica algo que ocurre en alg\u00fan lugar de la p\u00e1gina o en toda la p\u00e1gina. El evento en s\u00ed registra un cambio de estado de la p\u00e1gina o de alg\u00fan elemento de la misma y pone en marcha un mecanismo que permite ejecutar un proceso.<\/p>\n<p>El principal problema que tienen los eventos es que en algunos casos espec\u00edficos no funcionan. Sobretodo cuando est\u00e1s agregando elementos generados din\u00e1micamente desde el mismo c\u00f3digo <strong>JavaScript<\/strong>.<\/p>\n<p>Te dar\u00e1s cuenta que el <strong>HTML<\/strong> agregado en tiempo de ejecuci\u00f3n no funciona.<\/p>\n<p>Partiendo del ejemplo anterior, con el evento click. Vamos a crear una lista de elementos con un enlace que din\u00e1micamente crea otro elemento para la lista con su propio enlace.<\/p>\n<p>Por defecto, en el <strong>HTML<\/strong> inicial tenemos el primer elemento que sirve de gancho:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;events&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h4.html\"><span class=\"kw2\">h4<\/span><\/a>&gt;<\/span>Evento 0<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h4.html\"><span class=\"kw2\">h4<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;event&quot;<\/span>&gt;<\/span>Agregar otro evento<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>   \n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Se trata de una lista desordenada de eventos o de lo que te puedas imaginar.<\/p>\n<p>F\u00edjate en el siguiente script:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span>\n$<span class=\"br0\">&#40;<\/span>document<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ready<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.event'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'ul#events'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;li&gt;&lt;h4&gt;Evento '<\/span><span class=\"sy0\">+<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#content ul li'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">length<\/span><span class=\"sy0\">+<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">+<\/span><span class=\"st0\">'&lt;\/h4&gt;&lt;a href=&quot;#&quot; class=&quot;event&quot;&gt;Agregar otro evento&lt;\/a&gt;&lt;\/li&gt;'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div>\n<p>El documento o p\u00e1gina Web est\u00e1 esperando a que se haga click en el elmento, bot\u00f3n o enlace que contiene la clase \u00abevent\u00bb.<\/p>\n<p>Al hacer click en uno de estos elementos, agregamos al listado de eventos un nuevo evento tambi\u00e9n con su enlace para agregar nuevos elementos.<\/p>\n<p>Te dar\u00e1s cuenta en seguida que si pulsas en el enlace del elemento agregado din\u00e1micamente, su enlace no funciona igual que el primer elemento.<\/p>\n<p>\u00bfC\u00f3mo se resuelve esto?<\/p>\n<p>Las funciones son uno de los pilares fundamentales en <strong>JavaScript<\/strong>. Una funci\u00f3n es un procedimiento o conjunto de sentencias que realizan una tarea o calculan un valor.<\/p>\n<p>Para usar una funci\u00f3n, en primer lugar debes definirla en alg\u00fan lugar del \u00e1mbito donde se va a llamar.<\/p>\n<p>La funci\u00f3n que podemos crear para este ejemplo puede ser la siguiente:<\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span>\n<span class=\"kw2\">function<\/span> addOtherEvent<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'ul#functions'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;li&gt;&lt;h4&gt;Evento '<\/span><span class=\"sy0\">+<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'ul#functions li'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">length<\/span><span class=\"sy0\">+<\/span><span class=\"st0\">'&lt;\/h4&gt;&lt;a style=&quot;cursor:pointer;&quot; onclick=&quot;addOtherEvent();&quot;&gt;Agregar otro evento&lt;\/a&gt;'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div>\n<p>Estamos definiendo la funci\u00f3n addOtherEvent() que simplemente agrega un nueve evento a nuestro listado de eventos. F\u00edjate bien en el enlace del nuevo evento. Le hemos agregado el atributo \u00abonclick\u00bb con la llamada a la funci\u00f3n.<\/p>\n<p>La lista de eventos que tendremos inicialmente en el c\u00f3digo <strong>HTML<\/strong> ser\u00e1 algo similar a lo siguiente:<\/p>\n<div id=\"wpshdo_5\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_5\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_5\"><\/a><a id=\"wpshat_5\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_5\"  onClick=\"javascript:wpsh_toggleBlock(5)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_code(5)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_print(5)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_5\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;functions&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h4.html\"><span class=\"kw2\">h4<\/span><\/a>&gt;<\/span>Evento 0<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h4.html\"><span class=\"kw2\">h4<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">onclick<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;addOtherEvent();&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;cursor:pointer;&quot;<\/span>&gt;<\/span>Agregar otro evento<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>   \n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Seguramente, este detalle t\u00e9cnico se puede ver m\u00e1s claramente en alg\u00fan otro tipo de ejemplo pero, en estos d\u00edas se me ha ocurrido este. Espero que quede claro y puedas aplicarlo a otras situaciones.<\/p>\n<p>Cuando est\u00e1s programando, lo m\u00e1s l\u00f3gico es que recurras al uso de los eventos ya predise\u00f1ados pero en algunos casos no es la mejor forma de conseguir tu prop\u00f3sito debido providencialmente a la complejidad.<\/p>\n<p>Las funciones permiten ejecutar eventos en situaciones m\u00e1s complejas. La operaci\u00f3n que radica en las funciones me ha salvado la vida en m\u00e1s de un proyecto. Espero que esto te pueda servir de ayuda y te salve la vida a ti tambi\u00e9n.<\/p>\n<p>Los eventos son ideales para cambiar el estado de un elemento y listo pero, en tareas recursivas o iteradas, la funcionalidad se reduce y es muy probable que la ejecuci\u00f3n del evento funcione a la primera pero a la segunda vez de problemas y no acabe funcionando.<\/p>\n<p>Seg\u00fan mi experiencia he detectado que esto ocurre cuando la llamada al evento ejecuta alg\u00fan proceso en el servidor y retorna un suceso. En el proceso de vuelta, los eventos ya no hacen la misma acci\u00f3n.<\/p>\n<p>\u00bfEst\u00e1s en la misma situaci\u00f3n? Comparte tu experiencia y soluciona con el uso de funciones.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/eventos-vs-funciones\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/eventos-vs-funciones\/eventos-vs-funciones.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.<\/p>\n","protected":false},"author":1,"featured_media":7323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167],"class_list":["post-7322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-13T11:29:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-13T11:55:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/\",\"name\":\"Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png\",\"datePublished\":\"2019-06-13T11:29:51+00:00\",\"dateModified\":\"2019-06-13T11:55:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usar funciones en lugar de eventos con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog","description":"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog","og_description":"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-06-13T11:29:51+00:00","article_modified_time":"2019-06-13T11:55:27+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/","name":"Usar funciones en lugar de eventos con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png","datePublished":"2019-06-13T11:29:51+00:00","dateModified":"2019-06-13T11:55:27+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"En algunas situaciones los eventos no funcionan despu\u00e9s de una acci\u00f3n. Resuelve esta situaci\u00f3n utilizando funicones para la acci\u00f3n del evento.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/06\/usar-funciones-en-lugar-de-eventos-con-jquery.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/usar-funciones-en-lugar-de-eventos-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Usar funciones en lugar de eventos con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7322"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7323"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}