次のようなjQueryセレクターを指すように変数を設定するという厄介な問題が発生しています。var foobar=jQuery(this);
次に、この変数を作業対象の関数に渡します。少し単純化して、関数が次のようになっているとしましょう。
function SetFieldValue (selector) {
selector.val('test');
console.log ( selector );
console.log ( jQuery('#' + selector.attr('id')) );
}
この状況では、次のことを想定しています。
- セレクターは常にフォーム要素です(したがって、val()は有効な操作です)
- セレクターは、「id」属性を持つ単一のdom要素に解決されます
次に、2つのconsole.logステートメントが同じ結果を出力することを期待しますよね?さて、私はこの状態が約90%の時間しか起こらない状況に遭遇しています。
より多くのコンテキストを提供するために、問題を示す短いスクリーンキャストを作成しました。
参考までに、スクリーンキャストに表示される実際のSetFieldValueコードは次のとおりです。
function SetFieldValue ( domObject, value ) {
// as a safety function, check if a string representation of the domObject was passed in and convert it to a jQuery object if it was
if ( jQuery.type(domObject) === "string") {
console.log ("Value passed into SetFieldValue was a string representation so converting to jQuery object");
domObject = jQuery(domObject);
}
if ( jQuery.inArray (domObject.prop('tagName').toLowerCase(),['input' , 'select' , 'textarea']) >= 0 ) {
console.log ("setting to value attribute: " + value);
if ( domObject.hasAttr('id') ) {
domObject.val(value);
//jQuery('#' + domObject.attr('id')).val(value);
} else {
domObject.attr('value',value);
}
console.log ("Using jQuery ID it is set to: " + jQuery('#' + domObject.attr('id')).val() );
console.log ("Using jQuery selector variable it is set to: " + domObject.val() );
} else {
console.log ("setting to html attribute");
domObject.html( value );
}
return domObject;
}