Question

在这里，我动态创建一个jQuery'accordion'列表，并为手风琴中的每个'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>

Answer 1

这是您在使用异步Ajax调用时获得的“臭名昭着”的竞争条件。

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

的回调中

解决方案：在click()

的回调中移动$.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"));
        });   
    });             

});

jQuery使用Ajax动态创建节点

1 个答案: