Trigger for span text/html on changed

javascript html jquery jquery-events

49,627

Solution 1

you can use DOMSubtreeModified to track changes on your span element i.e(if text of your span element changes dynamically ).

$('.user-location').on('DOMSubtreeModified',function(){
  alert('changed')
})

check out the followinf link https://jsbin.com/volilewiwi/edit?html,js,output

Solution 2

The short answer is for jQuery with the change-Event is: NO,

This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. ... here is a link to the documentation https://api.jquery.com/change/

But with something like the MutationsObserver here the link to the MDN Reference https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver , you could watch for changes in the DOM. In your specific case the span in question.

Here an brief example (adapted from MDN Reference)
In the Example the span change is simulated with a setTimeout

  // select the target node
var target = document.getElementById('user-location');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.info("EVENT TRIGGERT " + mutation.target.id);
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

// simulate the Change of the text value of span
function simulateChange(){
    target.innerText = "CHANGE";
}

setTimeout(simulateChange, 2000);

<span id="user-location"></span>

If you want / have to use jQuery you could do this:
in this example I added a second span just to show how it could work

// Bind to the DOMSubtreeModified Event
$('.user-location').bind('DOMSubtreeModified', function(e) {
  console.info("EVENT TRIGGERT " + e.target.id);
});

// simulating the Change of the text value of span
function simulateChange(){
   $('.user-location').each(function(idx, element){
      element.innerText = "CHANGED " + idx;
   });
 }

setTimeout(simulateChange, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="firstSpan" class="user-location">Unchanged 0</span><br/>
<span id="secondSpan" class="user-location">Unchanged 1</span>

Solution 3

Using Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('.user-location')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('.user-location').text());   
});
// configuration of the observer:
var config = { childList: true};
// pass in the target node, as well as the observer options
observer.observe(target, config);

Solution 4

You can use input event :

Like this :

$(document).ready(function(){

    $(".user-location").on("input",function(){

        console.log("You change Span tag");

    })
})

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            span {
                border: 1px solid #000;
                width: 200px;
                height: 20px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <span class="user-location" contenteditable="true"> </span>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

        $(".user-location").on("input",function(){

            console.log("You change Span tag");

        })
    })
    </script>
    </body>  
</html>

Solution 5

Use Mutation API MutationObserver

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

View more solutions

49,627

Author by

Govind Samrow

I’m software engineer. I've complete my post graduation from Punjabi university, Patiala. I love my family, my state (Punjab) and my country. I'm son of Farmer ,I'm from village Arakwas, dist. sangrur and now in Chandighar.

Updated on February 03, 2022

Comments

Govind Samrow over 2 years
Is there any event in jQuery or JavaScript that triggered when span tag text/html has been changed ?

Code:
```
<span class="user-location"> </span>

$('.user-location').change(function () {
    //Not working
});
```
Michael d about 7 years

Well unfortunately it doesn't seem that the onchange alert happens with each onchange text insert. It only alerts when you click out of the box and change the focus to another element. I read that onchange actually doesn't work for span on another stackoverflow thread. Though I'd like to know how to make it work.
holographix over 6 years

Watch out because MutationEvents are deprecated: developer.mozilla.org/en-US/docs/Web/Guide/Events/…, use MutationObserver instead developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Sara Chipps over 6 years

you are a genius
Daniel Faure over 5 years

Will not work. What you're doing is fire the event on the input tag. Block elements do not accept onChange event.
Leonardo about 5 years

You are a life saver. Thank you so much.