更改时触发跨度 text/html

Question

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

代码：

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

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

Answer 1

简短回答 是针对 jQuery 的 change-事件是：没有,

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/

但是与 MDN 参考 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver 中的 MutationsObserver 类似的 link ，您可以观察 DOM。在您的具体情况下，span 有问题。

这是一个简短的例子（改编自 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>

如果你想/必须使用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>

Answer 2

您可以使用 javascript。

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

希望对您有所帮助。

Answer 3

您可以使用 input 事件：

像这样：

$(document).ready(function(){

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

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

    })
})

示例：

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

Answer 4

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

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

查看以下内容 link https://jsbin.com/volilewiwi/edit?html,js,output

Answer 5

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

Answer 6

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

更改时触发跨度 text/html

Trigger for span text/html on changed

html

javascript

jquery

jquery-events