Question

您好我正在创建我正在尝试为电子商务网站创建一个个人项目的界面。在网络开发中作为一个初学者，我似乎偶然发现了一个我不理解的问题。我正在使用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 aded on链接。我怎么解决这个问题？

另一个我不明白的问题是，当我尝试进入我拥有页面的文件夹并打开它时，manualy非链接将从开始工作。但是如果我从netbeans打开它们，例如他们所有工作。我做错了什么？

Answer 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”元素添加到页面时无关紧要，它们将始终有效。

jQuery加载函数链接不起作用

1 个答案: