jQuery détecter programatic changement de champ

Vous devriez être en mesure de déclencher l'événement de changement avec:

$('#myHiddenField').change();

OU

$('#myHiddenField').trigger('change');

Bien sûr, cela nécessitera le bloc de code responsable de la mise à jour de l'déposé à faire un de ces appels après il a fait son travail.

Cas 1:
Vous voulez changer la valeur par programme par vous-même et vous voulez juste pour distribuer un événement lorsque la valeur est modifiée.

$('#myfield').text('New value');
//$('#myfield').val('New value');
$('#myfield').trigger('change');

Cas 2:

Supposons que vous voulez détecter le changement programmatique à un champ qui n'est pas écrite par vous. Donc, il n'y a aucun moyen que vous pouvez déclencher le "changement" de l'événement.

Dans ce cas, Utilisez l'option "DOMSubtreeModified" pour détecter des changements dans le programme pour les éléments descendants d'un élément parent.

Exemple:

<div id="product-addons-total">
    <div id="total_price">200</div>
</div>

$(document).ready(function() {

    jQuery('#product-addons-total').on("DOMSubtreeModified",function(){
        console.log('content changed');
        //tamp_price_change_handler();
    });
});

Maintenant, si la valeur de la "total_price" les changements en quelque sorte par programme, il sera le feu "DOMSubtreeModified" de l'événement.
Exemple:

jQuery('#total_price').text('300');

Précaution pour le Cas 2: DOMSubtreeModified pouvez créer un boucle infinie et grandement dégrader les performances. Au lieu de cela, il est encouragé à utiliser MutationObserver.

Exemple avec MutationObserver:

//create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);        
  });    
});

//Let's configure the observer
var config = { childList: true, subtree:true, attributes: true, characterData: true,
    characterDataOldValue: true, attributeOldValue: true };
//Let's get a node.
var target = jQuery('#product-addons-total').get(0); 
//Let's pass the target and configuration to the observe function.
observer.observe(target, config); 

Cas 3:

Les moyens ci-dessus peut détecter un changement dans les DOM. Mais si vous voulez changer la valeur d'un champ de saisie de la programmation, alors que ces événements ne se déclenche pas. Dans ce cas, le seul moyen est de déclencher manuellement un événement.
Donc, d'abord modifier la valeur d'un champ de saisie, puis de déclencher manuellement un événement.

$('#inputfield').val(456465).trigger('change');

//Now the change event will fire.
$('#inputfield').on('change', function() {  
    console.log('input filed has been changed');
});

Vous pouvez taper sur une version de remplacement d'un JQ méthode de l'objet comme val ou html pour atteindre cet (ou éventuellement remplacer un "pur JS" méthode de l'objet). Personnellement, je ne peux pas obtenir MutationObserver de travail, et cette solution que je propose peut être plus simple:

const jqInvoiceNo = $('#InvoiceNo');
const jqProto = Object.getPrototypeOf( jqInvoiceNo );
const valOverride = function( newVal ){
    console.log( '£ override val, invoice no: ' + newVal );
    //essential function 'call'... note usage
    //we assume that if newVal is undefined this means we are using the
    //parameterless JQ method signature version, which returns the value
    if( newVal === undefined ){
        return jqProto.val.call( this );
    }
    jqProto.val.call( this, newVal );

    //... then do something else, having intercepted the value-setting mechanism
};
jqInvoiceNo.val = valOverride;

... //later, in your code:

jqInvoiceNo.val( '99' );

Important: ce code comme l'écrit ne remplace/remplace le val méthode pour cela un JQ objet. Il est essentiel d'être conscient que si vous allez $( '#InvoiceNo' ) ailleurs, vous aurez en fait être la création d'un entièrement nouveau JQ objet, sans remplacés val méthode. En d'autres termes, vous avez dans ce cas de garder une trace de votre JQ objets.

Vous pouvez également remplacer tout "pure JS" objet des méthodes de la même manière, notamment (pour ce cas) setAttribute.

NB pour ceux qui ne le savent pas encore, un JQ objet du 1er élément, c'est à dire [0], est la "vraie" JS objet qu'il contient.

const invoiceNo = $('#InvoiceNo')[ 0 ];
const proto = Object.getPrototypeOf( invoiceNo );
const setAttributeOverride = function( attr, newVal ){
    console.log( '£ override setAttribute, invoice no: ' + newVal );
    //essential function 'call'... note usage:
    proto.setAttribute.call( this, attr, newVal );
    if( attr === 'value' ){
        //... then do something else, having intercepted the value-setting mechanism
    }
};
//note that only this object 'invoiceNo' will be given the overridden method:
invoiceNo.setAttribute = setAttributeOverride;

.... //later, in your code:

$( '#InvoiceNo' )[ 0 ].setAttribute( 'value', '99' );

Contrairement à l'JQ exemple donné ci-dessus, il existe un et un seul de ces "pure JS" objet... alors va $( '#InvoiceNo' )[ 0 ] n'importe où dans votre code vous donnera toujours la même JS objet. Bien sûr, le chemin normal pour définir un attribut (ou plutôt de la "propriété") dans "pur JS" est

 object.value = newValue;

... qui commande, autant que je sache, ne peut pas être "remplacée". Sans doute cela peut être détecté avec MutationObserver, si vous avez plus de succès que moi.

PS exactement comment JQ définit la valeur de son "véritable JS" objet lorsqu'une JQ méthode comme val ou html est appelé je ne sais pas. Si vous vouliez vous pourrait en fait remplacer ces méthodes de "do it yourself", profitant du fait que son "équivalent" JQ objets font référence à la même sous-jacent JS objet, c'est à dire depuis $( '#InvoiceNo' )[ 0 ] se réfère toujours à la même JS objet. Mais dans ce cas, vous devez remplacer les val ou html pour TOUS JQ objets, c'est à dire modifier le prototype lui-même:

const jqInvoiceNo = $('#InvoiceNo');
const jqProto = Object.getPrototypeOf( jqInvoiceNo );
jqProto.superValMethod = jqProto.val;
const valOverride = function( newVal ){
    if( newVal === undefined ){
        return jqProto.superValMethod.call( this );
    }
    jqProto.superValMethod.call( this, newVal );

    const ourPureJSObject = this[ 0 ];
    //do something with this ... it will always the right one!
};
jqProto.val = valOverride;