web-dev-qa-db-fra.com

Déclencheur pour span text/html on modifié

Existe-t-il un événement dans jQuery ou JavaScript qui s'est déclenché lorsque la balise span text/html a été modifiée?

Code: 

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

$('.user-location').change(function () {
    //Not working
});

Merci d'avance!

javascriptjqueryhtmljavascript-events
9
Govind Samrow

vous pouvez utiliser DOMSubtreeModified pour suivre les modifications de votre élément span, c'est-à-dire (si le texte de votre élément span change de manière dynamique).

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

consultez le lien suivant https://jsbin.com/volilewiwi/edit?html,js,output

18
Mohit Arora

La réponse courte est pour jQuerychange- Event NO,

Cet événement est limité aux éléments input, aux zones textarea et à select elements. Pour les cases à cocher, les cases à cocher et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur sélectionne avec la souris, mais pour les autres types d'élément, l'événement est différé jusqu'à l'élément perd le focus. ... voici un lien vers la documentation https://api.jquery.com/change/

Mais avec quelque chose comme la MutationsObserver voici le lien vers la référence MDN https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver , vous pouvez surveiller les modifications apportées au DOM. Dans votre cas spécifique, la span en question.

Voici un bref exemple (adapté de MDN Reference)
Dans l'exemple, le changement span est simulé avec un 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>

avec jQuery vous pouvez faire ceci:
dans cet exemple, j'ai ajouté une seconde span juste pour montrer comment cela pourrait fonctionner}

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

4
winner_joiner

Utiliser 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);
2
PPB

Vous pouvez utiliser l'événement input:

Comme ça :

$(document).ready(function(){

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

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

    })
})

Exemple :

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

1
Ehsan

Utiliser l'API de mutation 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();
0
Matheus Toniolli

Vous pouvez utiliser javascript pour cela.

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

J'espère que ça va aider.

0
Pirate