web-dev-qa-db-ja.com

jQuery- SPANフィールドの内容の変更を検出する

テキストボックスのシミュレーションに使用する以下のコードがあります。

<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 方法。

jqueryonchange
13
IGGt

このイベントを使用できます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>
40
Praveen Kumar Purushothaman