通过以前的AJAX请求从加载的html加载带有jQuery AJAX请求的html内容

时间:2015-08-02 20:51:40

标签: jquery ajax

为了创建一种类似Wiki的结构,我想使用jQuery和AJAX将外部HTML代码加载到我的基页中。我成功完成了第一部分,用于在指定的div中加载html-content。但是,一些加载的html内容包含另一个链接。当我单击此链接(具有与原始文档中的链接相同的结构)时,没有任何反应。我怀疑它与事件监听器有关,但我不知道如何解决它。这是代码:

<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styleIndex.css">
    <script type="text/javascript" src="jquery-1.11.3.js"></script>

    <script type="text/javascript">
        $(document).ready(function(e) {

            $('#siteContent').find('a').on('click', function(e){
                e.preventDefault();

                $($(this).attr('loadLocation')).load($(this).attr('loadFile'));
            });
        });     
    </script>

</head>

<body>
    <div id="siteContent">
        <h1>AJAXload test...</h1>
        <p class="para">This is a testfile, to see if I'm able to load an external HTML file in my current HTML-page 
        in a flexible way. Click 
        <a class="link" loadFile="newHTML.html" loadLocation="#loadedAjax">here</a>
        , but 
        <a class="link" loadFile="newHTML2.html" loadLocation="#loadedAjax2">I want some new content</a> 
        to change the contents of the paragrapgh below.</p>
        <div class="para"><p id="loadedAjax" class="loadedAjax">I do have some text now...but let's replace it!</p></div>

        <div class="para"><p id="loadedAjax2" class="loadedAjax">I don't ;)</p></div>
    </div>
</body>

加载的html的代码与原始文件中的a-tags具有相同的结构。

期待您的回复。提前谢谢!

1 个答案:

答案 0 :(得分:1)

您需要使用委托而不是绑定到绑定期间存在的元素

$('#siteContent').on('click', 'a.link', function(e){
     e.preventDefault();
     $($(this).attr('loadLocation')).load($(this).attr('loadFile'));
});
  

$(&#39;#siteContent&#39;)。on(&#39;点击&#39;,&#39; a.link&#39;,功能(e){..})

以上意思是:抓住每一个&#34;点击&#34;在&#39; #siteContent&#39;上发生的事件 锚点,并有一个名为&#34; link&#34;在他们身上。

这意味着动态注入的html将始终具有所需的功能。

您可以在此处阅读有关活动委派的更多信息:

http://learn.jquery.com/events/event-delegation/

此外,您应该将整个javascript标记放在结束体标记()之前,因为它被认为是更好的做法。