wake-up-neo.com

jQuery - Wertänderung in ausgeblendetem Eingabefeld erkennen

Ich habe ein ausgeblendetes Textfeld, dessen Wert über eine Antwort AJAX aktualisiert wird.

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

Wenn sich dieser Wert ändert, möchte ich eine AJAX -Anfrage auslösen. Kann jemand raten, wie man die Änderung erkennt?

Ich habe den folgenden Code, weiß aber nicht, wie ich nach dem Wert suchen soll:

$('#userid').change( function() {  
    alert('Change!'); 
}) 
231
Ben

Dies ist zu spät, aber ich habe eine Antwort gefunden, falls es für jeden nützlich ist, der auf diesen Thread stößt.

Wertänderungen an ausgeblendeten Elementen lösen das Ereignis .change () nicht automatisch aus. Wo auch immer Sie diesen Wert einstellen, müssen Sie auch jQuery anweisen, um ihn auszulösen. 

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

Sobald das der Fall ist, 

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

sollte wie erwartet funktionieren.

562
yycroman

Da die verborgene Eingabe bei einer Änderung kein "change" -Ereignis auslöst, habe ich stattdessen MutationObserver verwendet, um dieses auszulösen.

(Manchmal werden verborgene Eingabewertänderungen von anderen Skripts ausgeführt, die Sie nicht ändern können.)

Dies funktioniert nicht in IE10 und darunter

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] );
20
lulalala

Sie können einfach die unten stehende Funktion verwenden. Sie können auch das Typelement ändern.

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

Wertänderungen an ausgeblendeten Elementen lösen das Ereignis .change () nicht automatisch aus. Wo auch immer Sie diesen Wert einstellen, müssen Sie auch jQuery anweisen, um ihn auszulösen.

HTML 

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

JAVASCRIPT

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();

sollte wie erwartet funktionieren.

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

9
Tarun Gupta

Es ist möglich, Object.defineProperty() zu verwenden, um die 'value'-Eigenschaft des Eingabeelements neu zu definieren und während des Änderns alles zu tun.

Mit Object.defineProperty() können wir einen Getter und Setter für eine Eigenschaft definieren und somit steuern.

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
$('#userid').change(function(){
  //fire your ajax call  
});

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

In diesem Beispiel wird der Entwurfsfeldwert jedes Mal zurückgegeben, wenn das ausgeblendete Entwurfsfeld seinen Wert ändert (Chrome-Browser):

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