1

保存された値のセットを表示するページをまとめました。ユーザーがドロップダウンメニューから新しい項目を選択するたびにページを更新する必要なく、mootools と AJAX 呼び出しを使用して値を更新しています。

HTML の各行は次のようになります。

<div class="selections">
<input class="checkbox selector" type="checkbox" CHECKED />

<span class="b_name">
    <select class="b_n selector">
        <!-- options -->
    </select>
</span>

<span class="b_level">

    <select class="b_l selector">
        <!-- options -->
    </select>

</span>

<span class="values">
    <!-- the values -->
</span>
</div>

頭の中で、次のようなイベントリスナーを設定しました:

$$('.selector').addEvent('change', function(event){changeValues(this);});

私の問題は、"b_name"選択が変更されたときに、選択のオプションのリストを更新する必要がある"b_level"ことです。別のページの PHP スクリプトを介してデータベースから可能なオプションのリストを取得し、"b_level"の innerHTML を置き換えることで、これを実現します。それを行うと、に接続されているイベントリスナーが機能し"b_l selector"なくなります。

次のように変更する"b_l selector"たびにイベントリスナーを明示的にアタッチすることで、この問題を解決しようとしました。"b_name"

row.getElement('.b_l').addEvent('change', function(event){changeValues(row.getElement('.b_l'));});

ここで、「row」は html 要素「div.selections」です。

まだ機能しておらず、何が起こっているのかわかりません。これを解決する方法について誰か提案できますか? または、おそらく私がしていることを行うためのより良い方法です。

4

3 に答える 3

2

これは JavaScript の仕組みであり、バグではありません。

使用する必要があるのはElement Delegationです。イベントを親要素にアタッチすると同時に、イベントが委任される要素を指定します。

要素委譲の基本的な例を次に示します: http://jsfiddle.net/oskar/ENR3E/

ドキュメント: http://mootools.net/docs/more/Element/Element.Delegation _

于 2010-04-09T22:23:47.750 に答える
1

要素を設定innerHTMLすると、要素の内容は完全に消去され、プロパティから解析された要素の新しいセットに置き換えられinnerHTMLます。古い要素に設定されたイベントは、新しい要素には適用されません。

jQuery は、live()イベントを使用してこの問題を解決します。ここで、ムーツールで同じことを達成しているように見える解決策を見つけました。

于 2010-04-09T21:43:50.110 に答える
0

あなたのアプローチは正しいです。おそらくaddEvent()コードにバグがあるだけです。innerHTML を置き換えるとイベント ハンドラーが消える理由は簡単です。ハンドラーが存在する要素を削除しているため、ハンドラーも削除されます。ただし、ハンドラーを再追加するアプローチは機能するはずです。

範囲の問題である可能性が高いと思います。次のように、div を明示的に参照するとどうなりますか。

row.getElement('.b_l').addEvent('change', function(event){
{
  changeValues($$('div.selections .b_l'));
});
于 2010-04-09T21:44:07.770 に答える