0

在这里，我正在动态创建一个 jQuery 'accordion' 列表并将 'id' 分配给手风琴内的每个 'p' 部分（参见以 "$.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>
4

1 回答 1

0

这是您在使用异步 Ajax 调用时遇到的“臭名昭著”的竞争状况。

请记住这一点：$.get()将启动，然后将在“后台”运行，而您的 Javascript 代码的其余部分继续运行。因此处理程序的绑定click()将发生before，新元素将插入到回调中$.get

解决方法：将click()handler的绑定移动到回调里面$.get

   $(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"));
        });   
    });             

});
于 2013-04-22T06:02:01.537 回答