Gibt es ein Ereignis in jQuery oder JavaScript, das ausgelöst wurde, wenn span Tag text/html geändert wurde?Trigger für span text/html bei Änderung
Code:
<span class="user-location"> </span>
$('.user-location').change(function() {
//Not working
});
Vielen Dank im Voraus!
Sie können DOMSubtreeModified verwenden, um Änderungen auf dem span-Element zu verfolgen dh (wenn sich der Text Ihres span-Elements dynamisch ändert).
$('.user-location').on('DOMSubtreeModified',function(){
alert('changed')
})
Check-out der followinf Link https://jsbin.com/volilewiwi/edit?html,js,output
Danke, es funktioniert –
Vorsicht, MutationEvents sind veraltet: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events, verwenden Sie stattdessen MutationObserver https://developer.mozilla.org/ de-DE/docs/Web/API/MutationObserver – holographix
Sie sind ein Genie –
Die kurze Antwort ist für jQuerychange -Event NO,
Dieses Ereignis ist begrenzt auf Eingang Elemente, TextArea- Boxen und Elemente auswählen. Für Auswahlfelder, Kontrollkästchen und Optionsfelder wird das Ereignis sofort ausgelöst, wenn der Benutzer eine Auswahl mit der Maus trifft. Bei den anderen Elementtypen wird das Ereignis jedoch so lange zurückgestellt, bis das Element den Fokus verliert. ... hier ein Link zur Dokumentation ist https://api.jquery.com/change/
Aber mit so etwas wie die MutationsObserver hier dem Link zur MDN Referenz https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver, könnten Sie für Veränderungen in dem DOM beobachten. In Ihrem speziellen Fall ist das span in Frage.
Hier ein kurzes Beispiel (angepasst von MDN Referenz)
Im Beispiel der span Änderung mit einem 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>mit jQuery Sie könnten tun Sie dies:
in diesem Beispiel habe ich eine zweite span nur um zu zeigen, wie es
// 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>Sie können javascript dafür verwenden funktionieren könnte.
<html>
<body>
<span class="user-location" onchange="myFunction()">
<input type="text">
</span>
<script>
function myFunction() {
alert("work");
}
</script>
</body>
</html>Hoffe, es hilft.
Nun, leider scheint es nicht, dass die Onchange-Warnung mit jeder onchange-Texteinfügung geschieht. Es wird nur benachrichtigt, wenn Sie auf das Feld klicken und den Fokus auf ein anderes Element ändern. Ich lese, dass onchange tatsächlich nicht für span auf einem anderen Stackoverflow-Thread funktioniert. Obwohl ich gerne wissen würde, wie es funktioniert. –
können Sie input Ereignis verwenden:
So:
$(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>
Mit 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);
Verwenden 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();
Was meinen Sie mit "change"? Wann ändert sich der innerHtml? –
'span' ist kein Eingabeelement, also wird nichts geändert, bis Sie sich geändert haben! S –
Ich möchte nur ein Ereignis, wenn auf Span Text geändert wurde? –