jquery .load链接不起作用

时间:2016-05-12 07:06:13

标签: jquery html load

我使用jquery加载方法作为iframe的替代方法,将html内容加载到我的index.html(home)中的div,并且我得到了包含链接的静态导航栏。但点击第一个链接后,它似乎不再起作用了。我还有一个登录控制台说:

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助,请查看https://xhr.spec.whatwg.org/

PS:初级水平:)

这是我的代码

HTML LINK:

 <ul class="dropdown-menu">
        <li id="tolink1"><a href="#">SAMPLE 1</a></li>
        <li id="tolink2"><a href="#">SAMPLE 2/a> </li>
        <li id="tolink3"><a href="#">SAMPLE 3</a></li>
        <li id="tolink4"><a href="#">SAMPLE 4</a></li>
 </ul>

Jquery的:

//#loadcontent is the id of the div
$(document).on('click', '#tolink1', function(e){
    $("#loadContent").load('http://localhost/impex/SAMPLE1.html');

});

$(document).on('click', '#tolink2', function(e){
    $("#loadContent").load('http://localhost/impex/SAMPLE2.html');

});

$(document).on('click', '#tolink3', function(e){
    $("#loadContent").load('http://localhost/impex/SAMPLE3.html');

});

$(document).on('click', '#tolink4', function(e){
    $("#loadContent").load('http://localhost/impex/SAMPLE4.html');

});

1 个答案:

答案 0 :(得分:0)

将您的html替换为:

<ul class="dropdown-menu">
        <li id="tolink1"><a href="javascript:void(0)">SAMPLE 1</a></li>
        <li id="tolink2"><a href="javascript:void(0)">SAMPLE 2/a> </li>
        <li id="tolink3"><a href="javascript:void(0)">SAMPLE 3</a></li>
        <li id="tolink4"><a href="javascript:void(0)">SAMPLE 4</a></li>
 </ul>

然后试试吧!