Question

我正在创建一个动态Div，我可以在关闭时从 showModalDialog 导入值。因此在关闭模态后，我得到了几个值。

我在这里要做的是：

我有几个动态div和每个div，我有一个打开窗口的链接。
选择文件后，它们将以逗号分隔的形式返回父窗口。
我想在打开弹出窗口的div中插入这些值。但在这种情况下我面临着麻烦。 Divid是动态生成的

以下是 Javascript + Jquery 的完整代码，我收到以下错误。

TypeError: theDiv.appendChild is not a function
[Break On This Error]   

theDiv.appendChild(newNode);

    <script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function eliminateDuplicates(arr,divID) 
{   
    var i,       
    len=arr.length,       
    out=[],       
    obj={};    
    for (i=0;i<len;i++) 
    {     
        obj[arr[i]]=0;   
    }   
    for (i in obj) 
    {     
        out.push(i);   
    }   
    return out; 
}
function GetElementsStartingWith(tagName, subString) {
    var elements = document.getElementsByTagName(tagName);
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.id && element.id.substr(0, subString.length) == subString) {
            result.push(element);
        }
    }
    return result;
}
Test= function(str,divID) 
{
    var arrID = new Array();
    arrID = str.split(',');                  
    arrID = eliminateDuplicates(arrID);            
    var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList'); 
    alert(theDiv);
    var cmp= $("#projectIDS"+divID).val(); //document.getElementById("projectIDS").value;
    var cnp = $("#countProj"+divID);//document.getElementById("countProj")  
    var cproj;
        if(cnp.val().length == 0)
            cproj=0;
        else
         cproj=parseInt(cnp.val());

    for (var j=0; j<arrID.length; j++)
    {  
        if (parseInt(cproj) + 1 > 50)
        { 
            alert("You cannot add more than 50 Project id's ");
            return;
        }
        if( cmp!="" && cmp.indexOf(arrID[j])!=-1)
        continue;
        var newNode = document.createElement('div');  
        newNode.style.cssText = "background:#CCCCCC;border:1px solid #666666;width:100px;word-wrap:break-word;margin:3px;float:left;color:black;text-decoration:none!important;height:auto;vertical-align:middle;padding-top:2px;";    
        newNode.title = arrID[j]+" ";
        newNode.innerHTML = '<input type=hidden name=Proj_' + j + ' ' + 'value=' + arrID[j] + '>' + arrID[j] + ' <a href="#" title="Remove Project" onclick="removetext($(this).parent());"><b>X</b></a>';   
        theDiv.appendChild(newNode);
        if(cmp.length == 0) 
            {
                //document.getElementById("projectIDS").value=arrID[j]
                $("#projectIDS"+divID).val(arrID[j]);
            }
        else
            {
                //document.getElementById("projectIDS").value = document.getElementById("projectIDS").value+","+arrID[j];
                $("#projectIDS"+divID).val($("#projectIDS"+divID).val()+","+arrID[j]);
            }
            cproj = parseInt(cproj)+1;  
        //document.getElementById("countProj").value =cproj; 
        cnp.value(cproj);
    }  
}
removetext = function(par)
{
    var strremove=par.text();
    var strexist = document.getElementById("projectIDS").value;
    strremove = strremove.replace(" X","");
    tempRemove(strexist, strremove);
    par.remove();
    var cproj;
        if(document.getElementById("countProj").value.length == 0)
            cproj=0;
        else
         {cproj=parseInt(document.getElementById('countProj').value);

        cproj=parseInt(cproj)-1;}                       
        document.getElementById("countProj").value =cproj;   
}

function tempRemove(strexist,strremove)
{
    var b = strexist.indexOf(strremove);
    var after = strexist.indexOf(",",b);
    var newstrexist;
    var before = strexist.lastIndexOf(",",b);
    if(after!=-1)
    {newstrexist=strexist.replace(strremove+',',"");}
    else if(before!=-1)
    {newstrexist=strexist.replace(','+strremove,"");}
    else
    {newstrexist= strexist.replace(strremove,"");}

    document.getElementById("projectIDS").value=newstrexist;
    //remove current friend
}
function openWindow(divID)
{
    var lookUpAlys=window.showModalDialog("files.cfm?d=" + Math.random() + '&fileID=' + divID,window,"center=yes;dialogWidth:895px:dialogHeight:785px;status:no");
    if(lookUpAlys.forename!=undefined)  
    { 
        var temp = lookUpAlys.forename;
        Test(temp,divID);
    }
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="1">
  <tr>
    <td>Choose</td>
    <td>Files</td>
    <td>Action</td>
  </tr>
  <cfloop from="1" to="5" index="i">
  <cfoutput>
  <tr>
    <td><input type="checkbox" name="getFile" id="getFile" value="#i#" /></td>
    <td><div id="projectsList#i#" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="text" name="projectIDS#i#" id="projectIDS#i#" data-id="#i#" value="" /><input type="text" data-id="#i#" name="countProj#i#" id="countProj#i#" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(#i#);">Files</a></td>
  </tr>
  </cfoutput>
  </cfloop>
</table>
</body>
</html>

所以，如果我输错了代码，我很抱歉。基本上尝试做经典的Javascript方式

Answer 1

这不符合我的想法：

var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList');

你应该做

var theDiv = $("#projectsList"+divID)[0];

获取DOM元素。

或者，对于这种情况，只需执行

var theDiv = document.getElementById("projectsList" + divID);

另外，我不确定你为什么要在各地混合原始DOM操作和jQuery包装操作。坚持其中一个，并保持一致。

Answer 2

var container = $('.itemsList');
var divSubmit = $(document.createElement('div'));
//assigning id to div
$(divSubmit).attr('id','itemTemplate');
$(divSubmit).css({"font-family":"Gotham, Helvetica Neue, Helvetica, Arial, sans-serif","position":"relative","height": "70px","clear" : "both","background-color":"#FFF","border-bottom": "0.09em solid #EBEBEB"});
//adding class to main container
$(divSubmit).addClass('itemTemplate');
//adding Child's name label and assigning id to it.
var Name = '<label class="lblName" id="lblName" for="Name">'+getName()+'</label>';
$(divSubmit).append(Name);
$(divSubmit).append(container);

这是一个示例代码。首先是名为itemslist的样本容器这将包含生成的div。 divSubmit将动态生成并附加到容器。为click事件找到一些div。让我们说我们想得到孩子的名字。

alert($($(this).find("label.lblName")).val());

动态Div ID并在其中创建元素

2 个答案: