jQuery validate Uncaught TypeError：nullのプロパティ 'nodeName'を読み取れません
私は次のコードを持っています：
_$(document).ready
(
function ()
{
$.validator.addMethod(
"lessThan",
function (value, element, param)
{
// bind to the blur event of the target in order to revalidate whenever the target field is updated
var target = $(param)
.unbind(".validate-lessThan")
.bind
(
"blur.validate-lessThan",
function ()
{
$(element).valid();
}
);
return parseFloat(value) <= parseFloat(target.val());
},
"Valoarea trebuie sa fie mai mica sau egala decat valoarea initiala"
);
}
);
$('#gvListDetaliiElemTranAdaugare input[name$=Valoare]').each
(
function (index, domEle)
{
$(this).rules
(
"add"
, {
required: true,
minlength: 1,
range: [0.1, Number.MAX_VALUE],
lessThan: '#ListaDetaliiElemTranModelAdaugare_' + index + '__ValoareRamasa',
messages:
{
required: "Valoarea este necesara!",
minlength: "Valoarea este necesara!",
range: "Valoarea este necesara!",
lessThan: "Valoarea trebuie sa fie mai mica sau egala cu " + $('#ListaDetaliiElemTranModelAdaugare_' + index + '__ValoareRamasa').val()
}
}
);
}
);
_コードが失敗すると、_Uncaught TypeError: Cannot read property 'nodeName' of null_を使用して$（this）.rules（）が再度指定されます。 $('#gvListDetaliiElemTranAdaugare input[name$=Valoare]')によって返されるhtmlは次のとおりです。
_[
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_0__Valoare" name="ListaDetaliiElemTranModelAdaugare[0].Valoare" onchange="OnValoareChange($(this).val(), 18590 , 0)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_1__Valoare" name="ListaDetaliiElemTranModelAdaugare[1].Valoare" onchange="OnValoareChange($(this).val(), 22972 , 1)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_2__Valoare" name="ListaDetaliiElemTranModelAdaugare[2].Valoare" onchange="OnValoareChange($(this).val(), 23036 , 2)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_3__Valoare" name="ListaDetaliiElemTranModelAdaugare[3].Valoare" onchange="OnValoareChange($(this).val(), 23038 , 3)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_4__Valoare" name="ListaDetaliiElemTranModelAdaugare[4].Valoare" onchange="OnValoareChange($(this).val(), 425306 , 4)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_5__Valoare" name="ListaDetaliiElemTranModelAdaugare[5].Valoare" onchange="OnValoareChange($(this).val(), 425308 , 5)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_6__Valoare" name="ListaDetaliiElemTranModelAdaugare[6].Valoare" onchange="OnValoareChange($(this).val(), 425309 , 6)" type="text" value="0.00000000000">
,
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_7__Valoare" name="ListaDetaliiElemTranModelAdaugare[7].Valoare" onchange="OnValoareChange($(this).val(), 425310 , 7)" type="text" value="0.00000000000">
]
_問題が見つかりました。
問題は、検証しようとしたHTMLが<form>...</form>タグ内に含まれていなかったことです。
それをするとすぐ、contextがあり、それはヌルではありませんでした。
Backboneプロジェクトでこの問題が発生しました。ビューに入力が含まれ、再レンダリングされます。これが起こることです（チェックボックスの例）：
- 最初のレンダリングが行われます。
- jquery.validateが適用され、入力にonClickイベントが追加されます。
- ビューを再レンダリングすると、元の入力は消えますが、jquery.validateはまだバインドされています。
解決策は、入力を完全に再レンダリングするのではなく、更新することです。実装のアイデアは次のとおりです。
var MyView = Backbone.View.extend({
render: function(){
if(this.rendered){
this.update();
return;
}
this.rendered = true;
this.$el.html(tpl(this.model.toJSON()));
return this;
},
update: function(){
this.$el.find('input[type="checkbox"]').prop('checked', this.model.get('checked'));
return this;
}
});
この方法では、render（）を呼び出す既存のコードを変更する必要はありません。update（）がHTMLの同期を維持していることを確認してください。
この問題は、作成前にHTML要素をバインドしようとしたために発生しました。
私のスクリプトはHTMLの上部にロードされ、HTMLコードの下部にロードする必要があります。
この問題が発生したのは、パネルが[data-role = "page"]要素の外側にあったためです。