javascript - スパンの変更テキストの処理方法

Question

jQueryを使用していて、あるスパン（と呼ばれる）で計算を表示したいのですが、変更されたテキストがその値に対して何らかの計算を行い、他のスパン（ `span2、span3、...と呼ばれるspan1）で表示したい場合。span1スパンのテキスト変更をどのように処理できますか？

Answer 1

Spanには、デフォルトでは「change」イベントはありません。ただし、このイベントは手動で追加できます。

スパンの変更イベントを聞きます。

$("#span1").on('change',function(){
     //Do calculation and change value of other span2,span3 here
     $("#span2").text('calculated value');
});

そして、span1のテキストを変更するところはどこでも。変更イベントを手動でトリガーします。

$("#span1").text('test').trigger('change'); 

Answer 2

span1のテキストを変更する関数を使用して、他のテキストを変更できます。

回避策として、本当にイベントを発生させたい場合は、changeテキストをスパン1に割り当てないでください。代わりに、jQueryで入力変数を割り当て、それに変更イベントを記述し、スパン1のテキストを変更します。代わりに、入力変数の値を変更して、次のように変更イベントを発生させます。

var spanChange = $("<input />");
function someFuncToCalculateAndSetTextForSpan1() {
    //  do work
    spanChange.val($newText).change();
};

$(function() {
    spanChange.change(function(e) {
        var $val = $(this).val(),
            $newVal = some*calc-$val;
        $("#span1").text($val);
        $("#spanWhatever").text($newVal);
    });
});

この「回避策」は、単純な変更イベントの作成のいくつかの側面では役立ちますが、非常に拡張されすぎていると感じていますが、span1を変更すると同時に他のスパンに変更を加えるのが最善です。

Answer 3

ここで解決策を見つけました

<span id='span1'>my text</span>
テキスト変更イベントは次のコマンドでキャプチャできるため、span1があるとします。

$(document).ready(function(){
    $("#span1").on('DOMSubtreeModified',function(){
         // text change handler
     });

 });