0

こんにちは、私は個人的なプロジェクトとして e コマース Web サイトのインターフェイスを作成しようとしています。Web 開発の初心者なので、理解できない問題に遭遇したようです。クリック時の2つのdivのコンテンツ。これは私のコードのHTMLです:

<ul id="title">
                <li><h2 class="title"><a href="" class="selected">Configureaza</a></h2></li>
                <li><h2 class="title"><a href="">Personalizeaza</a></h2></li>
                <li><h2 class="title"><a href="">Adonuri</a></h2></li>
                <li><h2 class="title"><a href="">Verifica</a></h2></li>
</ul>
<div id="tot">
        <div id="configureaza">
              <div id="stuff">
                    <img src="img/windows.jpg"/>
                           <div id="select">
                                <h2>Selecteaza Produsul Microsoft</h2>
                                <form>
                                    <ul>
                                        <li><input type="checkbox" value="Windows Vista"/>Windows Vista<span>+320 lei</span></li>
                                        <li><input type="checkbox" value="Windows 7"/>Windows 7<span>+440 lei</span></li>
                                        <li><input type="checkbox" value="Microsoft Office"/>Microsoft Office<span>+220 lei</span></li>       
                                    </ul>
                                </form>

                            </div>
                        </div>
                        <ul id="links">
                            <li><a href=""><img src="img/msvista_on.gif" title="Sistem de Operare"/></a></li>
                            <li><a href=""><img src="img/placadebaza.png" title="Placa de Baza"/></a></li>
                            <li><a href=""><img src="img/procesor.png" title="Procesor"/></a></li>
                            <li><a href=""><img src="img/aw_optical_on.gif" title="Unitate Optica"/></a></li>
                            <li><a href=""><img src="img/hd.jpg" title="Hard-Disk"/></a></li> 
                            <li><a href=""><img src="img/vs4.jpg" title="Rami"/></a></li>
                            <li><a href=""><img src="img/vc.jpg" title="Placa Video"/></a></li>
                        </ul>
                    </div>

            </div>

jQuery:

 $(document).ready(function(){
            $('img[title="Sistem de Operare"]').click(function(e){
                e.preventDefault();
                $('div#stuff').load('win.html');


            })
            $('img[title="Placa de Baza"]').click(function(e){
                 e.preventDefault();
                $('div#stuff').load('motherboard.html');

            })

            $("ul#title a").click(function(e){
                 e.preventDefault();
                var link = $(this).text();
                if(link === "Configureaza"){

                    $('div#tot').load('Configureaza.html');

                }else if(link === "Personalizeaza"){

                     $('div#tot').load('Personalizeaza.html');

                }else if(link === "Adonuri"){

                    $('div#tot').load('Addons.html');

                }else{

                     $('div#tot').load('Verifica.html');

                }
                $('ul#title a').removeClass('selected');
                $(this).addClass('selected');     

            })

        })

ul#links からの最初の 2 つのリンクのコードのみを投稿しました。他のコードは類似しているためです。ロード機能は正常に機能し、そこで指定された要素をロードします。しかし、div#tot のいずれかのリンクをクリックしてメイン ページに戻ると、他のリンクが機能しなくなり、リンクに # が追加されていることに気付きました。どうすればこれを解決できますか?

私が理解していない別の問題は、ページがあるフォルダーに移動して手動で開こうとすると、最初からリンクが機能しないことです。私は間違っていますか？

4

1 に答える 1

1

click() は、ページが最初に読み込まれたときに 1 回実行されます。click() で使用したセレクターがこれらの新しい要素と一致する場合でも、load() で新しい要素を追加すると、そのセレクターは再度実行されず、click() 関数はそれらに対して実行されません。

古いバージョンの jQuery では、これに「live()」と呼ばれるものを使用していましたが、現在は「on()」を使用する方法が推奨されています。したがって、この：

$("ul#title a").click(function(e){

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

$(document).on("click", "ul#title a", function(e){

これは、イベントのターゲットが「ul#title a」セレクターと一致する場合にドキュメントがクリックされたときに、先に進んでクリック ハンドラーを実行することを意味します。ドキュメントは最初から存在し、ハンドラーはドキュメント上にあるため、"ul#title a" 要素がいつページに追加されても関係なく、常に機能します。

于 2012-06-02T14:37:36.083 に答える