ここでは、jQuery の「アコーディオン」リストを動的に作成し、アコーディオン内の各「p」部分に「id」を割り当てています (「$.get("/DataPage.aspx",......." で始まる行を参照)。問題は、マウス クリックで各 'p' の 'id' を取得できないことです. 静的データでアコーディオンを生成したときに機能していました. 問題が機能しているかどうかを判断できませんでした. $.get() などで。
<html>
<head>
<title>Start Here</title>
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2.custom.css" />
</head>
<body>
<div id="HeaderDiv" style="overflow:scroll">Product Listing</div>
<div id="ParentContainer">
<div id="ParentDiv" class="container" style="max-width:300px;"></div>
<div class="container" style="max-width:900px;min-height:600px; background- color:azure;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.get("/DataPage.aspx", { "type": "category" }, function (data) {
/* 'data' is just a string with words separated by '#' character */
var str = "";
var strarray = data.split("#");
var len = strarray.length;
for (var i = 0; i < len; ++i) {
$("#ParentDiv").append('<p id="' + strarray[i] + '">' + strarray[i] + '</p>' + '<div id="div' + strarray[i] + '"><h6>something</h6></div>');
str += strarray[i];
}
alert(str);
$("#ParentDiv").accordion({
collapsible: true, active: false, heightStyle: "content"
});
});
$("*", document.body).click(function (e) {
e.stopPropagation();
var domElem = $(this).get(0);
$("#HeaderDiv").text(domElem.getAttribute("id"));
});
});
</script>
</body>
</html>