jQuery-检测 SPAN 字段内容的变化答案

【问题标题】：jQuery- Detect change in the content of a SPAN fieldjQuery-检测 SPAN 字段内容的变化
【发布时间】：2015-06-23 10:33:05
【问题描述】：

我有下面一段用于模拟文本框的代码：

<label for="alertCmpVal">ALERT VALUE:</label>
<span class="center textBox displayField highlight" id="alertCmpVal" contenteditable> <?php print $alert_val;?> </span>

我需要知道内容何时发生变化，例如我点击它，然后将它从 0 更改为 1。

我试过了：

$(document).ready(function() 
{
    $(document.body).on('change','#alertCmpVal',function()
    {   
        alert("boo");
        $('#alertCmpVal').removeClass('highlight');
    })
}

但这似乎不起作用。

(n.b. $(document.body) 被使用是因为在我的主页上，初始字段是动态加载的）

我猜这是它不喜欢的“变化”，但看不出用什么来代替它。（jQuery / HTML5 很好，因为它只在内部使用）。

我见过一些例子，但它们通常似乎适用于更复杂的场景，需要多个函数来在某些其他事情发生时检测变化，但我认为必须有一个更简单的解决方案，类似于 on change方法。

【问题讨论】：

请接受适合您需求的答案。已经快一年了。你没有得到更好的吗？

标签： jquery onchange

【解决方案1】：

您可以使用此活动DOMSubtreeModified:

$("span").on('DOMSubtreeModified', function () {
  alert("Span HTML is now " + $(this).html());
});

片段

$(function () {
  $("a").click(function () {
    $("span").html("Hello, World!");
  });
  $("body").on('DOMSubtreeModified', "span", function () {
    alert("Span HTML is now " + $(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span>Hello</span>
<a href="#">Click</a>

【讨论】：

这非常接近，但它会在 dom 被修改为元素时触发，而不仅仅是 html。这意味着任何自定义样式、属性、数据元素等也会触发此操作。
我认为这个事件在 DOM 3 级规范中也被弃用了。 Mozilla 将突变事件记录为后续事件，但我不确定这些事件是否被广泛接受。
@CodeForGood 我对 Magento 不是很好，但让我检查一下。
@CodeForGood 刚刚看了一下。没想法的朋友。对不起！
嗯，看看突变事件，似乎它们不可靠，实际上已经过时了。我会远离它们（或者当你通过制作一个特殊的 DOM 修改类来改变 dom 时进行管理）。 developer.mozilla.org/en-US/docs/Web/API/MutationObserver 它的兼容性也有不错的浏览器覆盖率（似乎低至 ie11）。如果你需要这些，在 ie9 或 10 上可能会出现问题（但尽量不要，因为那些浏览器是一个巨大的痛苦）

【解决方案2】：

我认为这段代码会对你有所帮助。

$(document).ready( function() {
    $('#myId').bind( "contentchange", function(){
        alert("Changed");
    });

    $( "#btn" ).click( function () {
        $('#myId').html( "Value" ).trigger( "contentchange" );
    });
});

http://jsfiddle.net/RKLmA/192/

【讨论】：

这没有检测到跨度中的内容变化，这就是问题所在。