Javascript 更改时触发跨度文本/html

Trigger for span text/html on changed

提问by Govind Samrow

Is there any event in jQuery or JavaScript that triggered when spantag text/html has been changed ?

当span标签 text/html 被更改时，jQuery 或 JavaScript 中是否有任何事件触发？

Code:

代码：

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

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

Thanks in advance!

提前致谢！

回答by Mohit Arora

you can use DOMSubtreeModifiedto track changes on your span element i.e(if text of your span element changes dynamically ).

您可以DOMSubtreeModified用来跟踪 span 元素的更改，即（如果 span 元素的文本动态更改）。

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

check out the followinf link https://jsbin.com/volilewiwi/edit?html,js,output

查看以下链接https://jsbin.com/volilewiwi/edit?html,js,output

回答by winner_joiner

The short answer is for jQuerychange-Event NO,

简短的回答是针对jQuerychange-Event NO，

This event is limited to inputelements, textareaboxes and selectelements. 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/

此事件仅限于input元素、textarea框和 select元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到该元素失去焦点时。...这里是文档的链接https://api.jquery.com/change/

Butwith something like the MutationsObserverhere 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 spanin question.

但是，通过类似于MutationsObserver此处的 MDN 参考链接https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver的链接，您可以观察 DOM 中的变化。在您的具体情况下有span问题。

Here an brief example (adapted from MDN Reference)
In the Example the spanchange is simulated with a setTimeout

这里有一个简短的例子（改编自 MDN 参考）
在这个例子中，span变化是用一个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>

with jQueryyou could do this:
in this example I added a second spanjust to show how it could work

使用jQuery你可以做到这一点：
在这个例子中，我添加了第二个span只是为了展示它是如何工作的

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

回答by PPB

Using Javascript MutationObserver

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

回答by Ehsan

You can use inputevent :

您可以使用input事件：

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>
        

回答by Matheus Toniolli

Use Mutation API MutationObserver

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

回答by Pirate

You can use javascriptfor that.

你可以用javascript它。

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

Hope it will help.

希望它会有所帮助。