web-dev-qa-db-ja.com

jQuery - 隠し入力フィールドの値の変更を検出

値がAJAXレスポンスによって更新される隠しテキストフィールドがあります。

<input type="hidden" value="" name="userid" id="useid" />

この値が変わったら、AJAXリクエストを起動します。変更を検出する方法について誰かがアドバイスできますか？

次のようなコードがありますが、値の検索方法がわかりません。

$('#userid').change( function() {  
    alert('Change!'); 
})
jqueryevent-handlingfieldonchangehidden
240
Ben

それで、これはかなり遅れています、しかし、私が答えを発見しました、それがこのスレッドに出くわすだれでもに役立つならば。

非表示要素の値が変更されても、自動的に.change（）イベントは発生しません。そのため、その値を設定している場所がどこであっても、jQueryにそれをトリガーするように指示する必要があります。

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

そうであれば、

$('#userid').change(function(){
      //fire your ajax call  
})

期待通りに動作するはずです。

577
yycroman

隠された入力は変更時に "change"イベントを引き起こさないので、代わりにMutationObserverを使ってこれを引き起こしました。

（隠された入力値の変更はあなたが変更できない他のスクリプトによって行われることがあります）

これはIE10以下では機能しません。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var trackChange = function(element) {
  var observer = new MutationObserver(function(mutations, observer) {
    if(mutations[0].attributeName == "value") {
        $(element).trigger("change");
    }
  });
  observer.observe(element, {
    attributes: true
  });
}

// Just pass an element to the function to start tracking
trackChange( $("input[name=foo]")[0] );
22
lulalala

下記の機能を使用するだけで、type要素を変更することもできます。

 $("input[type=hidden]").bind("change", function() {
       alert($(this).val()); 
 });

非表示要素の値が変更されても、自動的に.change（）イベントは発生しません。そのため、その値を設定している場所がどこであっても、jQueryにそれをトリガーするように指示する必要があります。

HTML

 <div id="message"></div>
<input type="hidden" id="testChange" value="0"  />

ジャバスクリプト

var $message = $('#message');
var $testChange = $('#testChange');
var i = 1;

function updateChange() {
    $message.html($message.html() + '<p>Changed to ' + $testChange.val() + '</p>');
}

$testChange.on('change', updateChange);

setInterval(function() {
    $testChange.val(++i).trigger('change');; 
    console.log("value changed" +$testChange.val());
}, 3000);

updateChange();

期待通りに動作するはずです。

http://jsfiddle.net/7CM6k/3/

9
Tarun Gupta

Input要素の 'value'プロパティを再定義し、その変更中に何かをするためにObject.defineProperty()を使うことは可能です。

Object.defineProperty()はプロパティのゲッターとセッターを定義し、それを制御することを可能にします。

replaceWithWrapper($("#hid1")[0], "value", function(obj, property, value) { 
  console.log("new value:", value)
});

function replaceWithWrapper(obj, property, callback) {
  Object.defineProperty(obj, property, new function() {
    var _value = obj[property];
    return {
      set: function(value) {
        _value = value;
        callback(obj, property, value)
      },
      get: function() {
        return _value;
      }
    }
  });
}

$("#hid1").val(4);

https://jsfiddle.net/bvvmhvfk/

4
Viktar Tserashchuk
$('#userid').change(function(){
  //fire your ajax call  
});

$('#userid').val(10).change();
2
Digambar Patil

この例では、隠しドラフトフィールドの値が変わるたびにドラフトフィールドの値が返されます（クロムブラウザ）。

var h = document.querySelectorAll('input[type="hidden"][name="draft"]')[0];
//or jquery.....
//var h = $('input[type="hidden"][name="draft"]')[0];

observeDOM(h, 'n', function(draftValue){ 
  console.log('dom changed draftValue:'+draftValue);
});


var observeDOM = (function(){
var MutationObserver = window.MutationObserver || 
window.WebKitMutationObserver;

  return function(obj, thistime, callback){
    if(typeof obj === 'undefined'){
      console.log('obj is undefined');
      return;
    }

    if( MutationObserver ){

        // define a new observer
        var obs = new MutationObserver(function(mutations, observer){

            if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ){

               callback('pass other observations back...');

            }else if(mutations[0].attributeName == "value" ){

               // use callback to pass back value of hidden form field                            
               callback( obj.value );

            }

        });

        // have the observer observe obj for changes in children
        // note 'attributes:true' else we can't read the input attribute value
        obs.observe( obj, { childList:true, subtree:true, attributes:true  });

       }
  };
})();
0
user2677034