Question

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

<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很好，因为它只在内部使用）。

我已经看过一些例子，但它们通常似乎是针对更复杂的场景，需要多个函数来检测某些其他事情发生时的变化，但我认为必须有一个更简单的解决方案，类似于{{1 }} 方法。

Answer 1

您可以使用此活动DOMSubtreeModified：

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

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为此代码会对您有所帮助。

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

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

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

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

2 个答案: