CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Govind Samrow
Govind Samrow

Reputation: 10179

Trigger for span text/html on changed

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

Upvotes: 16

Views: 61830

Answers (6)

winner_joiner
winner_joiner

Reputation: 14750

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 the 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>

Upvotes: 13

Matheus Toniolli
Matheus Toniolli

Reputation: 498

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

Upvotes: 1

PPB
PPB

Reputation: 3087

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

Upvotes: 7

Mohit Arora
Mohit Arora

Reputation: 470

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

Upvotes: 38

Ehsan
Ehsan

Reputation: 12959

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>

Upvotes: 3

Suraj
Suraj

Reputation: 3137

You can use javascript for that.

<html>
  <body>
    <span class="user-location" onchange="myFunction()">
       <input type="text"> 
    </span>
    <script>
       function myFunction() {
          alert("work");
       }
    </script>
 </body>
  </html>

Hope it will help.

Upvotes: -3

Related Questions