How to handle change text of span

Question

I'm using jQuery and I want to show some calculation in a span (called span1) and I want when text of span1 changed do some calculation on it's value and show in other spans (called `span2 ,span3,...). How I can handle text change of span?

"`This event is limited to elements, boxes and <select> elements`"</select> — SpYk3HH, Jun 09 '12 at 05:13
You should handle this from wherever you are changing the value of the ``. — Alexander, Jun 09 '12 at 05:21
Please refer answer with mutation observer here : [trigger-for-span-text-html-on-changed](https://stackoverflow.com/questions/39221775/trigger-for-span-text-html-on-changed) — Anil Uttani, Jan 25 '18 at 05:52

score 30 · Answer 1 · answered May 23 '13 at 12:55

30

Span does not have 'change' event by default. But you can add this event manually.

Listen to the change event of span.

$("#span1").on('change',function(){
     //Do calculation and change value of other span2,span3 here
     $("#span2").text('calculated value');
});

And wherever you change the text in span1. Trigger the change event manually.

$("#span1").text('test').trigger('change');

answered May 23 '13 at 12:55

Ruchit Patel

1,030
1
12
24

Have you tried it in IE? its working in Chrome but not working in IE for me. – Siddique Mahsud Mar 25 '16 at 04:19
@SiddiqueMahsud: IE has to many versions that all behave differently. Just stating IE means in **all* of them? And what is the definition of all then? Including 'Edge'? – Kukeltje Feb 02 '17 at 16:14

score 16 · Accepted Answer · answered Jun 09 '12 at 05:22

You could use the function that changes the text of span1 to change the text of the others.

As a work around, if you really want it to have a change event, then don't asign text to span 1. Instead asign an input variable in jQuery, write a change event to it, and whever ur changing the text of span1 .. instead change the value of your input variable, thus firing change event, like so:

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);
    });
});

Though I really feel this "work-around", while useful in some aspects of creating a simple change event, is very overextended, and you'd best be making the changes to other spans at the same time you change span1.

score 6 · Answer 3 · answered Jul 20 '20 at 09:12

6

Found the solution here

Lets say you have span1 as <span id='span1'>my text</span>
text change events can be captured with:

$(document).ready(function(){
    $("#span1").on('DOMSubtreeModified',function(){
         // text change handler
     });

 });

answered Jul 20 '20 at 09:12

Rola

1,598
13
12

Worked like a charm for me. Can also be used with a standard eventListener without JQuery. `document.getElementById("test").addEventListener("DOMSubtreeModified", function(i) { ...` – ALZlper Dec 31 '20 at 21:07

score 0 · Answer 4 · answered Jun 08 '23 at 11:30

You must try this if you want to make function on html change

 $("body").on('DOMSubtreeModified', ".showtotal", function() {
     
     console.warn('Content of the span changed.......');
     
 });

or you can also try this

 var targetSpan = $('.class');
 var observer = new MutationObserver(function(mutations) {
 console.log('Content of the span changed');
});
// Configure and start observing the target element for changes in child nodes
 var config = { childList: true, subtree: true };
 observer.observe(targetSpan[0], config);

How to handle change text of span

4 Answers4

Linked