0

嗨，我正在尝试创建一个电子商务网站的界面作为个人项目。作为网络开发的初学者，我似乎遇到了一个我不明白的问题。我正在使用 jQuery 的加载功能来改变点击时 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 个链接的代码，因为其他代码类似。好吧，当我第一次加载页面并单击例如 $('img[title="Sistem de Operare"]')加载功能正常工作，它加载那里指定的元素。但是，如果我单击 div#tot 中的任何链接，然后返回主页，则其他链接不再起作用，并且我注意到链接上添加了 # beinng。我该如何解决这个问题？

我不明白的另一个问题是，当我尝试转到我有页面的文件夹并手动打开它时，所有链接都不会从一开始就起作用。但是如果我从 netbeans 打开它们，它们都可以工作。什么我做错了吗？

4

1 回答 1

1

click() 在您的页面首次加载时运行一次。一旦您使用 load() 添加新元素，即使您与 click() 一起使用的选择器与这些新元素匹配，该选择器也不会再次运行，并且 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 回答