2

ページのさまざまな部分を表示および非表示にするために使用しているスクリプトがあります。目的は、ユーザーがリンクをクリックしたときにコンテンツを前後に移動することです。このコンテンツをすべて同じページに保持する必要があります。個別のページに分割することはできません。

これまでのところ、ページが読み込まれると、ステップ1に必要なものを非表示にして表示し、ユーザーをステップ2に誘導するリンクを追加することができます。

ステップ2にリンクが表示されて追加され、ステップ1に戻るか、ステップ3に進むと、これらのリンクは機能しません。デフォルトの防止アクションが機能していないようです。リンクをクリックすると、ステップ1またはステップ3を表示する代わりに、URLに移動します。

ステップ1とステップ3へのリンクではなく、ステップ2へのリンクが機能するのはなぜですか？

stepOne.show();
    stepOneTwo.show('fast', function() {
        stepOneTwo.append( z + '<a href="#step2" style="color:white;"    id="step_2">GO TO NEXT STEP >></a></div>');
        });

            $("#step_2").click(function(e){ 
            e.preventDefault();
                 stepOne.hide(); 
                 stepOneTwo.hide(); 
                 stepTwo.toggle();
                 stepTwoTwo.show('fast', function() {
                 stepTwo.append(z + '<a href="#step1" style="color:white;" id="step_1">BACK >></a></div></br></br>' + z + '<a href="#step3" style="color:white;" id="step_3">GO TO NEXT STEP >></a></div>');
                }); 
            }); 

            $("#step_1").click(function(e){ 
            e.preventDefault();
                stepTwo.hide();
                stepTwoTwo.hide();
                stepThree.hide(); 
                stepThreeTwo.hide();
                stepThreeThree.hide();
                stepThreeFour.hide();
                stepFour.hide();
                stepFourTwo.hide();
                stepFourThree.hide();
                k.hide();
                stepOne.show();
                stepOneTwo.show('fast', function() {
                stepOneTwo.append( z + '<a href="..." style="color:white;" id="step_2">GO TO NEXT STEP >></a></div>');
                });
            });

            $("#step_3").click(function(e){ 
            e.preventDefault();
                 stepTwo.hide(); 
                 stepTwoTwo.hide(); 
                 stepThree.toggle();
                 stepThreeTwo.toggle();
                 stepThreeThree.toggle();
                 stepThreeFour.show('fast', function() {
                 stepThree.after(c + '<a href="..."       style="color:white;" id="step_2">GO BACK >></a></div> </br></br>' + c + '<a href="..." style="color:white;" id="step_6">GO TO NEXT STEP >></a></div>');                                   
                }); 
            }); 

});     
</script>
4

2 に答える 2

2

ステップを動的に追加しているようです。

イベントバインディングの時点で、要素はDOMに存在している必要があります。

イベントをバインドしたが、たとえばDOM要素をイベントに置き換えた場合、イベントはDOM要素とともに削除されるため、再バインドする必要があります。

常に再バインドする必要がないように、イベント委任を使用してイベントをバインドできます。
これにより、静的要素を介してイベントが動的要素に間接的にバインドされます。

これの代わりに：

$("#step_2").click(function(e){ //... });

jQueryのバージョンに応じて、次のように、on（）とdelegationまたはdelegate（）のいずれかを使用します。

// when using jQuery 1.7 or later
$("body").on("click", "#step_2", function(e){ //... });

// or when using jQuery 1.6 or earlier -- note the reversal of event and target
$("body").delegate("#step_2", "click", function(e){ //... });

代わりに、body優先される最も近い静的要素を使用する必要があります。

于 2013-03-26T16:11:35.053 に答える
0

問題は、$（ "＃step1"）。click（）のハンドラーが解析されるときに、それをバインドする＃step1要素がないことです。要素は後で＃step2がクリックされたときに作成されます。

ハンドラーがまだ作成されていない要素にバインドできるようにするには、on（）（http://api.jquery.com/on/）を使用して、近くの親オブジェクトにバインドし、「上記のリンクの「直接および委任されたイベント」セクション。

リンク要素が<divid= "links"> </ div>内にあると仮定すると（おそらくそうではありませんが、HTMLソースを提供しなかったので、少し発明します）、ステップ1を書き直すことができます。ハンドラー（および他のハンドラーも同様）：

    $("#links").on("click", "#step_1", function(e){ 
        e.preventDefault();
        stepTwo.hide();
        stepTwoTwo.hide();
        stepThree.hide(); 
        stepThreeTwo.hide();
        stepThreeThree.hide();
        stepThreeFour.hide();
        stepFour.hide();
        stepFourTwo.hide();
        stepFourThree.hide();
        k.hide();
        stepOne.show();
        stepOneTwo.show('fast', function() {
            stepOneTwo.append( z + '<a href="..." style="color:white;" id="step_2">GO TO NEXT STEP >></a></div>');
        });
    });
于 2013-03-26T16:19:38.147 に答える