jquery - jqueryを使用して要素内のテキストが変更されたときに関数を呼び出しますか?

Question

ページの要素内のテキストが変更されたときに関数を実行したいと考えています。その要素のテキストは別の外部 JS 関数によって更新されるため、その関数を制御することはできません。

更新: 要素はスパンです。

<span class="dynamic">some Text</span>

Answer 1

回避策があります。

ライブデモ

$('#elementId').change(function(){
   alert("changed");
});

var previousVal = "";
function InputChangeListener()
{
   if($('#elementId').val() != previousVal)
   {
     previousVal  = $('#elementId').val();
     $('#elementId').change();    
   }
}

setInterval(InputChangeListener, 500);

$('#elementId').val(3);

Answer 2

これを行うには、要素を変更イベントにバインドします。テキスト値を設定するtext()と、すぐchange()に要素が呼び出されます。

次に例を示します。http：//jsfiddle.net/WWuNf/1/

HTML：

<divid="field">フー</div>

脚本：

$(document).ready(function(){
    $('#field').on('change', function(evt){
        foo();
    }).text('Bar').change();
});

function foo() {
 alert('changed');        
}

編集：もちろん、これは、フィールドの値が、ユーザーとの直接の対話ではなく、他の手段によって変更されている場合です。そのようなものについては、またはのいずれかにバインドする必要がありkeyup()ますkeypress()。

Answer 3

その要素にイベントを追加してみてください

$('.target').change(function() {
  alert('Handler for .change() called.');
});

詳細：http ://api.jquery.com/change/

Answer 4

このchange()メソッドでは、そのイベントを明示的にトリガーする必要があり、常にそうであるとは限らないことを考えると、ミューテーション イベントを使用する、やや不器用な代替手段を提供したいと考えました。

このアプローチでは、の値が変更されたときに発生するイベントbodyをリッスンするように要素を設定しました (これは、設計上、が削除されて置き換えられた場合に発生しないことを意味します)。私はこれを行うためにjQueryを使用しているため...に到達するアプローチは少し不器用です:DOMCharacterDataModifiedtextNodetextNodetextNode

$('body').on('DOMCharacterDataModified', 'p', function(e){
    console.log(e.originalEvent.prevValue, e.originalEvent.newValue);
});

$('button').click(
    function(){
        var t = $(this).prev().val();
        document
            .getElementById('test')
            .firstChild.nodeValue += ' ' + t;
    });
​

JS フィドルのデモ。

Mutation Events はバージョン 9 より前の IE ではサポートされていないことに注意することが重要です。そのため、これは機能しますが (手動でイベントをトリガーする必要はありません)、単にカスタム イベントをtrigger().

参考文献:

• ミューテーション イベントに対するブラウザの互換性。.
• 変異イベント。

Answer 5

$('#element').on('change', function() {

});