2

私は次のようなコードを持っています：

<html>
    <body>
        <div id="product_descriptioncontent">
            <input type="text" id="a" />
            <textarea id="b" />
        </div>
    </body>
<html>

つまり、私のdivには、入力、テキスト領域、または画像のいずれかが含まれています。しかし、私の質問は、divで子の値が変更されたときに変更を検出する方法です。

4

4 に答える 4

3

あなたはこのようなことをすることができます：

$('#a, #b').on('change', function() {
   $('#product_descriptioncontent').css('border', '1px solid green')
});
于 2012-06-06T07:58:33.790 に答える
3

イベントはonchange、要素がフォーカスを失ったとき、つまり、要素が獲得したときとblurは異なるときにのみ発生します。valuefocus

このような機能をリアルタイムで提供するネイティブリスナーはわかりませんが、jQueryの.data()メソッドを操作して現在の値を保存し、次のような標準のキーボードイベントでチェックすることができkeyupます。

$('#product_descriptioncontent').children().each(function() {
    $(this).on('keyup', function() {
        if ($(this).data('c_val') != $(this).val()) {
            alert('value changed!');
            //do other stuff
        }
        $(this).data('c_val', $(this).val());
    }).data('c_val', $(this).val());
});​​

JSFiddle

keyup追加のチェックのために、を複数のイベントに再マップすることもできることに注意してください。

$(this).on('keyup mouseup blur', function(){

ユーザーが何も入力せずに呼び出す必要がある場合は、単に呼び出すだけでなく、その要素の関数を$('#element').keyup()トリガーします。on=]

.on()jQueryメソッドはjQuery1.7以降でのみサポートされていることに注意してください。古いバージョンでは、を使用する必要があります.live()。

于 2012-06-06T08:12:01.023 に答える
1

inputまた、子要素のHTML5イベントをバインドすることによっても実行できます。これは、9未満のIEバージョンでは機能しませんが、このような場合は、propertychangeイベントを使用できます。以下のコードは両方を実行し、IE9は両方を処理できるため、IE9propertychangeの場合は、標準inputイベントを使用する方がよいため、イベントのバインドを解除します。

$(document).ready(function() {
    var propertyChangeUnbound = false;
    $("#product_descriptioncontent").children().bind("propertychange", function(e) {
        if (e.originalEvent.propertyName == "value") {
            alert("Value changed!");
            //do other stuff
        }
    });

    $("#product_descriptioncontent").children().bind("input", function() {
        if (!propertyChangeUnbound) {
            $("#product_descriptioncontent").unbind("propertychange");
            propertyChangeUnbound = true;
        }
        alert("Value changed!");
        //do other stuff
    });
});

これがjsfiddleリンクです：http：//jsfiddle.net/yNxaW/

これは、部分的には、別のスタックオーバーフローの質問への回答に基づいています：入力を変更するキー押下のみをキャッチしますか？

于 2012-06-06T08:27:42.610 に答える
0

onchangeイベントリスナーを追加できます。

<html>
    <body>
        <div id="product_descriptioncontent">
            <input onchange="somefunction(this)" type="text" id="a" />
            <textarea onchange="somefunction(this)" id="b" />
        </div>
    </body>
<html>
于 2012-06-06T07:58:09.653 に答える