jQuery: Cómo manejar el cambio de texto de lapso

Estoy usando jQuery y quiero mostrar algo de calibración en un lapso (llamado span1) y quiero cuando el texto de span1 haya cambiado su calculo y se muestre en otros tramos (llamado `span2, span3, ...). ¿Cómo puedo manejar el cambio de texto de span?jQuery: Cómo manejar el cambio de texto de lapso

gracias

Fuente

2012-06-09 Arian

no funciona – Arian

"' Este evento se limita a elementos, cajas y <select> elements'" – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/900807/">SpYk3HH</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">Debe manejar esto desde dondequiera que esté cambiando el valor de la' '<span>. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/417685/">Alexander</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">Respuesta</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">13<i class="fa fa-thumbs-up"></i></span> <i class="fa fa-check fa-2x"></i> </div> <div class="post-offset"> <div class="answer fmt"> <p>podría utilizar la función que cambia el texto de SPAN1 para cambiar el texto de los otros.</p> <p>Como solución, si realmente desea que tenga un evento <code class="prettyprint-override">change</code>, entonces texto no asign para abarcar 1. En lugar asign una variable de entrada en jQuery, escribir un evento de cambio a ella, y whever ur cambiar el texto de SPAN1 .. en vez cambia el valor de la variable de entrada, disparando por lo tanto evento de cambio, así:</p> <pre><code class="prettyprint-override">var spanChange = $("<input />"); function someFuncToCalculateAndSetTextForSpan1() { // do work spanChange.val($newText).change(); }; $(function() { spanChange.change(function(e) { var $val = $(this).val(), $newVal = some*calc-$val; $("#span1").text($val); $("#spanWhatever").text($newVal); }); }); </code></pre> <p>Aunque me siento realmente esta "solución temporal", si bien son útiles en algunos aspectos de la creación de un simple cambio evento, está muy sobre extendido, y será mejor que realice los cambios en otros tramos al mismo tiempo que cambia span1.</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/10958587">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2012-06-09 05:22:19</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/900807/">SpYk3HH</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">24<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>El span no tiene el evento 'cambiar' por defecto. Pero puedes agregar este evento manualmente.</p> <p>Escuche el evento de cambio de span.</p> <pre><code class="prettyprint-override">$("#span1").on('change',function(){ //Do calculation and change value of other span2,span3 here $("#span2").text('calculated value'); }); </code></pre> <p>Y donde quiera que cambie el texto en span1. Dispare el evento de cambio manualmente.</p> <pre><code class="prettyprint-override">$("#span1").text('test').trigger('change'); </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/16714531">Fuente</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2013-05-23 12:55:17</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">¿Lo has probado en IE? Está trabajando en Chrome pero no funciona en IE para mí. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">@SiddiqueMahsud: IE tiene muchas versiones que se comportan de manera diferente. ¿Solo decir IE significa en ** todos *? ¿Y cuál es la definición de todo entonces? Incluyendo 'Edge'? – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/4478047/">Kukeltje</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Esa vez estaba usando IE 11. gracias – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Cuestiones relacionadas</div> <ul class="relative_list"> <li> 1. <a href="http://es.uwenku.com/question/p-wtpohran-d.html" target="_blank" title="Obtener texto de lapso usando jQuery"> Obtener texto de lapso usando jQuery </a> </li> <li> 2. <a href="http://es.uwenku.com/question/p-zhmdwkcb-bb.html" target="_blank" title="¿Cambiar el texto del lapso?"> ¿Cambiar el texto del lapso? </a> </li> <li> 3. <a href="http://es.uwenku.com/question/p-celrmbqx-g.html" target="_blank" title="Envuelva un lapso de alrededor de un texto en jQuery"> Envuelva un lapso de alrededor de un texto en jQuery </a> </li> <li> 4. <a href="http://es.uwenku.com/question/p-kwslnhlc-bt.html" target="_blank" title="jQuery valor de texto entrada de cambio"> jQuery valor de texto entrada de cambio </a> </li> <li> 5. <a href="http://es.uwenku.com/question/p-oeaawhmr-bc.html" target="_blank" title="cambio html texto de enlace con jQuery"> cambio html texto de enlace con jQuery </a> </li> <li> 6. <a href="http://es.uwenku.com/question/p-funzajse-z.html" target="_blank" title="jQuery reemplazar html en lapso"> jQuery reemplazar html en lapso </a> </li> <li> 7. <a href="http://es.uwenku.com/question/p-avmmdpbo-bm.html" target="_blank" title="jQuery - en el texto de entrada de cambio"> jQuery - en el texto de entrada de cambio </a> </li> <li> 8. <a href="http://es.uwenku.com/question/p-bapphszh-k.html" target="_blank" title="¿Cómo cambio el comportamiento de procesamiento de mi control personalizado de ser un lapso"> ¿Cómo cambio el comportamiento de procesamiento de mi control personalizado de ser un lapso </a> </li> <li> 9. <a href="http://es.uwenku.com/question/p-klxddfud-b.html" target="_blank" title="jQuery: Fuego clic en el evento en un lapso de"> jQuery: Fuego clic en el evento en un lapso de </a> </li> <li> 10. <a href="http://es.uwenku.com/question/p-kknzsmfq-s.html" target="_blank" title="Cómo manejar el cambio de orientación en Sencha Touch V2"> Cómo manejar el cambio de orientación en Sencha Touch V2 </a> </li> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4606349252"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <li> 11. <a href="http://es.uwenku.com/question/p-fxrpdckn-r.html" target="_blank" title="jQuery UI autocompletar añadiendo un lapso"> jQuery UI autocompletar añadiendo un lapso </a> </li> <li> 12. <a href="http://es.uwenku.com/question/p-xdgkedpj-z.html" target="_blank" title="cambiando periódicamente de texto en un lapso de una matriz con jQuery"> cambiando periódicamente de texto en un lapso de una matriz con jQuery </a> </li> <li> 13. <a href="http://es.uwenku.com/question/p-afmxehqo-m.html" target="_blank" title="manejar jquery ajax redirigir"> manejar jquery ajax redirigir </a> </li> <li> 14. <a href="http://es.uwenku.com/question/p-nvscnwlf-v.html" target="_blank" title="Controlar el evento de cambio de texto de entrada"> Controlar el evento de cambio de texto de entrada </a> </li> <li> 15. <a href="http://es.uwenku.com/question/p-bggbinrb-p.html" target="_blank" title="cómo establecer un valor para un lapso usando jQuery"> cómo establecer un valor para un lapso usando jQuery </a> </li> <li> 16. <a href="http://es.uwenku.com/question/p-epaodlzx-k.html" target="_blank" title="En Jquery ¿Cómo manejar la pasta?"> En Jquery ¿Cómo manejar la pasta? </a> </li> <li> 17. <a href="http://es.uwenku.com/question/p-vdgdoyex-bp.html" target="_blank" title="¿Cómo encuentro un lapso con una clase específica que contiene una cadena de texto exacta?"> ¿Cómo encuentro un lapso con una clase específica que contiene una cadena de texto exacta? </a> </li> <li> 18. <a href="http://es.uwenku.com/question/p-hvniludw-br.html" target="_blank" title="cambio Jquery con retraso"> cambio Jquery con retraso </a> </li> <li> 19. <a href="http://es.uwenku.com/question/p-qruytvhk-p.html" target="_blank" title="encontrando lapso dentro de este"> encontrando lapso dentro de este </a> </li> <li> 20. <a href="http://es.uwenku.com/question/p-zrdairdj-bo.html" target="_blank" title="Cómo ajustar cada palabra en un lapso pero conservar el formato de texto"> Cómo ajustar cada palabra en un lapso pero conservar el formato de texto </a> </li> <li> 21. <a href="http://es.uwenku.com/question/p-pscyxfow-s.html" target="_blank" title="Cambio de texto en el QProgressBar"> Cambio de texto en el QProgressBar </a> </li> <li> 22. <a href="http://es.uwenku.com/question/p-pqhzskbl-c.html" target="_blank" title="Detectando el cambio de html textarea"> Detectando el cambio de html textarea </a> </li> <li> 23. <a href="http://es.uwenku.com/question/p-glefdzwp-bg.html" target="_blank" title="Como llegar primer elemento lapso de una clase div y el cambio"> Como llegar primer elemento lapso de una clase div y el cambio </a> </li> <li> 24. <a href="http://es.uwenku.com/question/p-sqqlgzor-bx.html" target="_blank" title="val() no desencadena el cambio() en jQuery"> val() no desencadena el cambio() en jQuery </a> </li> <li> 25. <a href="http://es.uwenku.com/question/p-ztoacpce-br.html" target="_blank" title="¿Cómo envuelvo un lapso alrededor de la última palabra del texto interno de un elemento, usando jQuery?"> ¿Cómo envuelvo un lapso alrededor de la última palabra del texto interno de un elemento, usando jQuery? </a> </li> <li> 26. <a href="http://es.uwenku.com/question/p-zczufhbq-bb.html" target="_blank" title="Cambio "Lista de Listados" texto"> Cambio "Lista de Listados" texto </a> </li> <li> 27. <a href="http://es.uwenku.com/question/p-yddstybp-bc.html" target="_blank" title="jQuery Validación: El cambio de reglas dinámicamente"> jQuery Validación: El cambio de reglas dinámicamente </a> </li> <li> 28. <a href="http://es.uwenku.com/question/p-nwtsmicm-bs.html" target="_blank" title="¿Cómo cambio el estilo de animación de un jQuery Accordion?"> ¿Cómo cambio el estilo de animación de un jQuery Accordion? </a> </li> <li> 29. <a href="http://es.uwenku.com/question/p-sapzoqka-b.html" target="_blank" title="Jquery seleccione Cambio de"> Jquery seleccione Cambio de </a> </li> <li> 30. <a href="http://es.uwenku.com/question/p-gjdnjejo-bw.html" target="_blank" title="¿Cómo cambio el texto de un elemento ComboBox?"> ¿Cómo cambio el texto de un elemento ComboBox? </a> </li> </ul> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048471"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Última pregunta </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-vzhwpjke-o.html" target="_blank" title="css - círculo con margen en el borde"> css - círculo con margen en el borde </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-ejmsdher-h.html" target="_blank" title="wchar_t para UTF-16 en Linux?"> wchar_t para UTF-16 en Linux? </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-zqcpcnzj-bt.html" target="_blank" title="analizando el código fuente de C++ en el entorno Java"> analizando el código fuente de C++ en el entorno Java </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-mldfxdcb-bq.html" target="_blank" title="Forma correcta de retrasar al permitir que el ciclo de ejecución continúe"> Forma correcta de retrasar al permitir que el ciclo de ejecución continúe </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-czqzkbnh-bx.html" target="_blank" title="Cómo clases anónimas en TypeScript"> Cómo clases anónimas en TypeScript </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-xrrbjxjz-bw.html" target="_blank" title="Usando Require.js sin data-main"> Usando Require.js sin data-main </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-fnounlpe-bu.html" target="_blank" title="creando miles de URL a través de mod-rewrite"> creando miles de URL a través de mod-rewrite </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-okwzpawg-v.html" target="_blank" title="excepción mod_rewrite para un archivo específico"> excepción mod_rewrite para un archivo específico </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-welfmtwj-u.html" target="_blank" title="¿Cómo actualizo una GUI en Java?"> ¿Cómo actualizo una GUI en Java? </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-rtxitwlu-q.html" target="_blank" title="De uso general Método FromEvent"> De uso general Método FromEvent </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Cuestiones relacionadas</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://es.uwenku.com/question/p-wtpohran-d.html" target="_blank" title="Obtener texto de lapso usando jQuery"> Obtener texto de lapso usando jQuery </a> </li> <li class="side_article_list_item"> 2. <a href="http://es.uwenku.com/question/p-zhmdwkcb-bb.html" target="_blank" title="¿Cambiar el texto del lapso?"> ¿Cambiar el texto del lapso? </a> </li> <li class="side_article_list_item"> 3. <a href="http://es.uwenku.com/question/p-celrmbqx-g.html" target="_blank" title="Envuelva un lapso de alrededor de un texto en jQuery"> Envuelva un lapso de alrededor de un texto en jQuery </a> </li> <li class="side_article_list_item"> 4. <a href="http://es.uwenku.com/question/p-kwslnhlc-bt.html" target="_blank" title="jQuery valor de texto entrada de cambio"> jQuery valor de texto entrada de cambio </a> </li> <li class="side_article_list_item"> 5. <a href="http://es.uwenku.com/question/p-oeaawhmr-bc.html" target="_blank" title="cambio html texto de enlace con jQuery"> cambio html texto de enlace con jQuery </a> </li> <li class="side_article_list_item"> 6. <a href="http://es.uwenku.com/question/p-funzajse-z.html" target="_blank" title="jQuery reemplazar html en lapso"> jQuery reemplazar html en lapso </a> </li> <li class="side_article_list_item"> 7. <a href="http://es.uwenku.com/question/p-avmmdpbo-bm.html" target="_blank" title="jQuery - en el texto de entrada de cambio"> jQuery - en el texto de entrada de cambio </a> </li> <li class="side_article_list_item"> 8. <a href="http://es.uwenku.com/question/p-bapphszh-k.html" target="_blank" title="¿Cómo cambio el comportamiento de procesamiento de mi control personalizado de ser un lapso"> ¿Cómo cambio el comportamiento de procesamiento de mi control personalizado de ser un lapso </a> </li> <li class="side_article_list_item"> 9. <a href="http://es.uwenku.com/question/p-klxddfud-b.html" target="_blank" title="jQuery: Fuego clic en el evento en un lapso de"> jQuery: Fuego clic en el evento en un lapso de </a> </li> <li class="side_article_list_item"> 10. <a href="http://es.uwenku.com/question/p-kknzsmfq-s.html" target="_blank" title="Cómo manejar el cambio de orientación en Sencha Touch V2"> Cómo manejar el cambio de orientación en Sencha Touch V2 </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://es.uwenku.com/contact">Contactanos</a></li> <li>© 2020 ES.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>