为了创建一种类似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具有相同的结构。
期待您的回复。提前谢谢!
答案 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标记放在结束体标记()之前,因为它被认为是更好的做法。