Trigger for span text/html on changed

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

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>

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

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>

Trigger for span text/html on changed

Related

Recent Posts