0

私は ajax 呼び出しを介していくつかの html をロードしています。

<script>この html には、タグに JavaScript も含まれています。

<input slider>これらのスクリプト タグは実行されますが、 (JQM ライブラリの一部)の変更イベントにイベント ハンドラーをアタッチしようとしています。

これは、「非推奨」を使用すると機能します.live()。問題は、この html が数回読み込まれ、各イベント ハンドラが毎回再追加されることです。

代わりに.on()DOCS として使用すると、入力の値を変更してもイベントがトリガーされないことが示唆されます。

"input type="range" name="betInput" id="Size-@sel.UniqueId" min="0" max="@sel.AvailableToBet"/"

// Using .live() here works but keeps adding
$('#Size-@sel.UniqueId').on('change', function () {

                    console.debug('Should print when slider-value is changed but is not');
                });


                // This next line will however trigger the event above.
                $('#Size-@sel.UniqueId').trigger('change');

JQuery 1.8.2 および JQM 1.2.0 の使用

4

2 に答える 2

0

on次のように動作させるには、セレクターを追加する必要がありますlive。

// Using .live() here works but keeps adding
$('#Size-@sel.UniqueId').on('change', function () {

次のようなものにする必要があります：

$('parentSelector').on('change', ,'#Size-@sel.UniqueId', function () {

ドキュメントで詳細を読む：

セレクターが省略されているかnullの場合、イベントハンドラーは直接または直接バインドされていると見なされます。ハンドラーは、選択した要素でイベントが発生するたびに呼び出されます。イベントが要素で直接発生するか、子孫（内部）要素からバブルが発生するかは関係ありません。

セレクターが提供されている場合、イベントハンドラーは委任されたものと呼ばれます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫（内部要素）に対してのみ呼び出されます。jQueryは、イベントターゲットからハンドラーがアタッチされている要素（つまり、最も内側の要素から最も外側の要素）までイベントをバブルし、セレクターに一致するパスに沿ったすべての要素に対してハンドラーを実行します。

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベントハンドラーがアタッチされたときに存在することが保証されている要素を選択することにより、委任されたイベントを使用して、イベントハンドラーを頻繁にアタッチおよび削除する必要をなくすことができます。この要素は、たとえば、Model-View-Controllerデザインのビューのコンテナー要素、またはイベントハンドラーがドキュメント内のすべてのバブリングイベントを監視する場合はドキュメントにすることができます。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

于 2012-11-03T17:16:10.647 に答える