Question

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

代码：

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

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

提前致谢！

Answer 1

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

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

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

Answer 2

简短的回答是针对 jQuery change - 事件否，

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

但是类似于MutationsObserver此处指向MDN参考https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver的链接，您可以观察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 3

使用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 4

您可以使用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 5

您可以使用javascript。

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

希望它会有所帮助。

Answer 6

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

更改了span text / html的触发器

6 个答案: