我创建了一个Firefox OS应用程序。当我点击标题时，它会加载一些网络内容，修改它并使用div.innerHtml显示它。这很有效。
动态内容包含一些不同的段<p>XXX</p>。每个段落都有自己的id“text0”，“text1”等等。
当用户点击某个段落时，应该调用一个JavaScript函数。
我搜索了各种网站，并尝试了不同的方法将onclick-Eventhandler添加到动态内容中，但这些似乎都不起作用。
你能看一下我的代码吗？
我已经标记了这个地方，我想用“====＆gt;＆gt;＆gt;＆gt;＆gt;”添加事件处理程序在content.js摘录中。
的index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style/icons.css"/>
<link rel="stylesheet" type="text/css" href="style/principal.css"/>
<link rel="stylesheet" type="text/css" href="style/header.css"/>
<link rel="stylesheet" type="text/css" href="style/toolbar.css"/>
<link rel="stylesheet" type="text/css" href="style/sidebar.css"/>
<link rel="stylesheet" type="text/css" href="style/menuaction.css"/>
<link rel="stylesheet" type="text/css" href="style/menulist.css"/>
<link rel="stylesheet" type="text/css" href="style/pagebody.css"/>
<title>FxOS Stub</title>
</head>
<body>
XXX
<div id="page0" class="pagebody" aria-owns="tb0" aria-expanded="true">
<!-- Junkyard, only for the sake of the example - NOT for real use -->
<div id="mainpage" style="margin:0.5rem 1rem 0.5rem 1rem">
<h2>FxOsStub revisited.</h2>
<p>This is the first page body (aka page 0, usually your splash screen.)
<br/>Activate the others by pressing the toolbar's items.</p>
</div>
<!-- End of Junkyard - - - - - - - - - - - - - - - - - - - - - - - -->
</div>
XXX
<footer><button>Cancel</button></footer>
</section>
<script type="text/javascript" src="js/temporary.js"></script>
<script type="text/javascript" src="js/dispatcher.js"></script>
<script type="text/javascript" src="js/install.js"></script>
<script type="text/javascript" src="js/toolbar.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/menuaction.js"></script>
<script type="text/javascript" src="js/menulist.js"></script>
<script type="text/javascript" src="js/pagebody.js"></script>
<script type="text/javascript" src="js/content.js"></script>
</body>
</html>
content.js：
var id_link;//
window.addEventListener(
"load",
function() {
document.getElementById('headline').onclick=LoadContent;
//document.getElementById('mainpage').onclick=CallPage;
id_link = new Object();
}
);
function CallPage() {
var display = document.getElementById('mainpage');
display.innerHTML = "";
}
function LoadContent() {
// Cross domain XHR
var display = document.getElementById('mainpage');
var xhr = new XMLHttpRequest({mozSystem: true});
xhr.mozSystem = true;
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4)
{
//crossDomainXHRDisplay.innerHTML = "<h4>Result from Cross-domain XHR</h4>" + xhr.response;
//crossDomainXHRDisplay.style.display = "block";
var iEnd = 0;
var text = xhr.response;
var output = "";
// Clear all Returns
text = text.replace(/\n/g, "");
text = text.replace(/\r/g, "");
//text = text.replace(/<img.*\/>/g, "image");
// Set HTML header
output = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n";
output = output + "\"http://www.w3.org/TR/html4/loose.dtd\">";
output = output + "<html>\n";
output = output + "<head>\n";
output = output + "<title>Spiegel online</title>";
output = output + "</head>\n";
output = output + "<body>\n";
var cnt_it = 0;
var text_upper = text;
// Search for headlines
while(iEnd == 0)
{
var match = text.match(/\<h2\sclass\=\"article\-title\">(.+?)<\/h2>(.*)/);
if(match != null)
{
if (match.length > 0)
{
var titel=match[1];
var link_src = titel.match(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/);
id_link[cnt_it]=link_src[1];
titel = titel.replace(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/,"<h2>$2</h2>");
output = output + "<p id=\"text"+cnt_it+"\">" + titel;//match[1];
cnt_it++;
text = match[2];
// Search for article intro
var match_intro = text.match(/(.+?)\<h2\sclass\=\"article\-title\">/);
if(match_intro != null)
{
if (match_intro.length > 0)
{
var search_intro = match_intro[1];
var intro = search_intro.match(/<p\sclass\=\"article\-intro clearfix\">(.+?)<\/p.*/);
if(intro != null)
{
if (intro.length > 0)
{
output = output + intro[1];
}
}
}
}
output = output + "</p>\n";
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
iEnd = 0;
var text_test = xhr.response;
text_test = text_test.match(/.+?<div\sclass=\"auto-width\snav-channel-sub\">(.*)/);
var text_lower = xhr.response;//text_test[0];
text_lower = text_lower.replace(/\n/g, "");
text_lower = text_lower.replace(/\r/g, "");
text_lower = text_lower.replace(/<img.+?>/g, "");
while(iEnd == 0)
{
var text_lower = text_lower.match(/<ul\sclass\=\"article\-list\">(.+?)<\/ul>(.*)/);
if(text_lower != null)
{
if (text_lower.length > 0)
{
var title = text_lower[1];
var link_src = title.match(/<a href=\"(.+?)\" .*<\/a>/);
if (link_src != null)
{
id_link[cnt_it]=link_src[1];
title = title.replace(/<a href=\"(.+?)\" title=\"(.+?)\".*>.*<\/a>/, "$2");//" - "+id_link[cnt_it]);
//output = output + "<p id=\"text"+cnt_it+"\"><ul class=\"article-list\">" + text_lower[1] + "</ul></p>\n";
output = output + "<p onClick=\"CallPage()\" id=\"text"+cnt_it+"\">" + title + "</p>\n";
cnt_it++;
}
text_lower = text_lower[2];
iEnd = 1;
}
else
{
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
output = output + "</body>\n";
output = output.replace(/\n/g, "");
output = output.replace(/\r/g, "");
====>>> How to add a WORKING event handler to the different paragraphs, which have the id text0, text1 and so on...
display.insertAdjacentHTML('afterbegin', output);
//display.innerHTML = output;
display.style.display = "block";
//var ObjectUse=display.getElementById("text0");
//ObjectUse.addEventListener("click", function (event) { alert('Hallo'); CallPage(); }, false);
//ObjectUse.onclick="alert('Hallo')";//document.CallPage;**
//var cnt_again = 0;
//for(cnt_again=0; cnt_again<cnt_it; cnt_again++)
//{
// document.getElementById('text'+cnt_again).onclick=CallPage;
// }
//jQuery('.clickable').bind('click', CallPage);
}
};
xhr.onerror = function () {
display.innerHTML = "<h4>Result from Cross-domain XHR</h4><p>Cross-domain XHR failed</p>";
display.style.display = "block";
};
xhr.open("GET", "http://www.spiegel.de", true);
xhr.send();
}
答案 0 :(得分：1)
既然你说你的段落是动态生成的，那么你可以向主体添加一个事件监听器，并检查event.target，这是事件源的元素。
以下是代码：
document.body.addEventListener('click', function(e) {
// e.target.id now is the id of the clicked element
// if you want you can obtain the number in the id and use it like this:
var page = e.target.id.substr(4);
// do something
}, false);