如何检测span元素内的文本变化？按钮修改文本时检测失效

你的代码无法生效有两个核心问题：

• change 事件仅针对表单控件（如<input>、<select>）生效，普通<span>元素修改文本不会触发该事件。
• 每次点击按钮才调用eventp()绑定事件，不仅绑定时机错误，还会导致重复绑定，即使能触发也会多次弹出提示。

以下是两种可行的解决方法：

方法一：手动触发自定义事件 #

这种方式适合你能控制文本修改操作的场景，简单直接：

<span class="spn">Span</span>
<button onclick="changespan()">click</button>

<script>
// 页面加载完成后一次性绑定自定义事件监听
$(function() {
  $('.spn').on('textChange', () => alert('detect span text change.'));
});

function changespan() {
  $('.spn').text("span text changed.");
  // 修改文本后手动触发自定义事件
  $('.spn').trigger('textChange');
}
</script>

方法二：使用MutationObserver监听DOM变化 #

如果需要自动检测所有可能的文本变化（包括非按钮触发的修改），可以用浏览器原生的MutationObserver API：

<span class="spn">Span</span>
<button onclick="changespan()">click</button>

<script>
$(function() {
  const spanElement = document.querySelector('.spn');
  // 配置监听规则：监听子节点变化（文本变更会触发子节点变化）
  const observerConfig = { childList: true, subtree: true };

  // 变化发生时的回调
  const onChange = function(mutations) {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        alert('detect span text change.');
      }
    });
  };

  // 创建观察者并启动监听
  const observer = new MutationObserver(onChange);
  observer.observe(spanElement, observerConfig);
});

function changespan() {
  $('.spn').text("span text changed.");
}
</script>

内容的提问来源于stack exchange，提问作者kian