1

2 つの選択ボックスがあり、それぞれが特定の ID を持つスパン要素にあります。最初の選択ボックスは国、もう 1 つは都市リストです。国を選択すると、都市選択ボックス コンテナー スパンの innerHtml が ajax 関数の応答に置き換えられます。しかし、ページの読み込みの開始時に addeventListener 関数が正常に動作するが、スパンの innerHtml の置換後は動作せず、置換後、都市の selectbox の ID が置換前と同じである場合、selectbox の onchange 属性を使用して関数を起動したいと考えています。使っているだけです。

document.getElementById('to_city').addEventListener('change',doSomething,false);

このコードは、window 要素の onload によって初期化されます。

それは ajax の置換なしで動作しますが、その後は動作しません。

4

1 に答える 1

1

コンテンツを AJAX に置き換える場合は、イベントを再度バインドする必要があります。そのため、コンテンツを置き換えた後にイベントを再度バインドすることをお勧めします。

イベントバブリングを使用して回避する方法があります。

JQuery 1.4+ は onchange イベントの伝播をサポートしているため、jquery デリゲート関数を使用して同じことを実現できます。http://api.jquery.com/delegate/

Jquery を使用すると、1 行だけで作業が完了します。

$("#container").delegate("#to_city", "change", doSomething); // Workd in all browsers

IE でサポートされていない addEventListener を使用しているため、以下の例では IE を無視しました。Jqueryなしの動作例（IEでは動作しません）： http://codebins.com/bin/4ldqpb1/2

document.getElementById("container").addEventListener( 'change', function(e) {
    var targ=e.target;
    if (targ.id == "to_city") { //you just want to capture to_city event
        //DO STUFF FOR SELECT
        //DO STUFF
        doSomething();
        alert("id: " + targ.id + "\nvalue: " + targ.value);
    }

}, false)

説明：

イベントをバインドすると、それらはセレクターや ID ではなく、その特定の要素にバインドされます。そのため、コンテンツと新しい置換要素を同じ ID の新しい要素に置き換えると、新しい要素にはイベントが関連付けられません。そのため、イベントを再度添付する必要があります。したがって、AJAX コンテンツの置換後にイベントを添付すると、doSomething が機能します。しかし、それはあまり良い解決策ではありません。

イベントバブリングの概念を使用しています。多くのイベントがドキュメントの上部にバブルされます。(IE は変更イベントをバブルしません) そこで、コンテナにハンドラーを記述し、イベントをリッスンします。各イベントには、このイベントを起動する dom 要素を示すターゲットまたは srcElement があります。dom 要素が探しているものである場合は、関数を実行します。この can では、ID が to_city の要素を探しています。それが if 条件です。

于 2012-07-11T01:28:24.763 に答える