wake-up-neo.com

Trigger für span text/html bei geändert

Gibt es ein Ereignis in jQuery oder JavaScript, das ausgelöst wurde, wenn das span-Tag text/html geändert wurde?

Code: 

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

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

Danke im Voraus!

9
Govind Samrow

sie können DOMSubtreeModified verwenden, um Änderungen an Ihrem Spannelement zu verfolgen, d. h. (wenn sich der Text Ihres Spannelements dynamisch ändert).

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

schauen Sie sich den folgenden Link an: https://jsbin.com/volilewiwi/edit?html,js,output

18
Mohit Arora

Die kurze Antwort ist für jQuerychange- Event NO,

Dieses Ereignis ist auf die Elemente input, textarea und .__ beschränkt. select Elemente. Für Auswahlfelder, Kontrollkästchen und Optionsfelder Das Ereignis wird sofort ausgelöst, wenn der Benutzer mit .__ eine Auswahl trifft. die Maus, aber für die anderen Elementtypen wird das Ereignis bis .__ verschoben. das Element verliert den Fokus. ... hier ist ein Link zu der Dokumentation https://api.jquery.com/change/

Aber mit etwas wie der MutationsObserver Hier der Link zur MDN-Referenz https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver , Sie könnten nach Änderungen im DOM. In Ihrem speziellen Fall die betreffende span.

Hier ein kurzes Beispiel (angepasst an die MDN-Referenz)
Im Beispiel wird die span-Änderung mit einer setTimeout-Simulation simuliert.

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

mit jQuery können Sie Folgendes tun:
in diesem Beispiel habe ich eine zweite span hinzugefügt, um zu zeigen, wie es funktionieren könnte

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

Javascript MutationObserver verwenden

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

Sie können das Ereignis input verwenden:

So was :

$(document).ready(function(){

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

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

    })
})

Beispiel:

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

Mutations-API verwenden 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

Sie können javascript dafür verwenden.

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

Ich hoffe es wird helfen.

0
Pirate