如何在div元素上调用方法时创建具有动态使用的id的div元素?

时间:2013-12-05 05:45:15

标签: javascript html css aloha-editor

首先,我是JavaScript新手。我正在使用 aloha 编辑器。我想通过为每个div分配ID,使用div代码动态创建文本区域。使用该id我必须调用一个方法,即aloha方法。一切都很顺利,但aloha方法没有获得id。在浏览器上,我得到一个空的空间,而不是一个aloha盒子。

这是我的代码..

的javascript

     var screen=document.getElementById('addScreens');
     num_q=document.getElementById('numquest').value;

     for(i=0;i<num_q;i++) {   
         div1=document.createElement("div");
         div1.id="multicolumn";
         screen.appendChild(div1);
     }

     //aloha
     $(document).ready(function() {
         $('#multicolumn').aloha(); //multicolumn is not defined
     });

**HTML**

<html>
<body>
 <br><input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
     <input type="button" value="submit" onclick="getFields();">
<div id="addScreens"> <br> </div>
</body>
</html>

<style type="text/css">

            #multicolumn {

                -webkit-column-width:300px;
                -webkit-column-gap:30px;
                -moz-column-width:300px;
                -moz-column-gap:30px;
                column-width:100px;
                column-gap:30px;
                      width:550px;
                height: 150px;
                margin: 0 auto;
                      overflow-x: auto;
                      overflow-y: auto;
                   }

            </style>

那么,我如何将动态创建的div的id随处可见? 提前感谢任何想法。

2 个答案:

答案 0 :(得分:1)

您可以在$ document中创建div,然后在其上调用aloha。请参阅以下代码以了解动态ID生成

 //aloha
    $(document).ready(function() {
         var screen=document.getElementById('addScreens');
         var num_q=document.getElementById('numquest').value;
         for(i=0;i<num_q;i++)
         {   
            var div1=document.createElement("div");
            div1.id = "multicolumn_" + i;
            screen.appendChild(div1);
            $('#' + div1.id).aloha(); 
         }
         //multicolumn is not defined
    });

答案 1 :(得分:1)

根据您共享的代码,根本不会创建多列div,因为输入字段的值永远不会设置为数值。在代码中考虑这一行

<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>

并在JS中调用此行

num_q=document.getElementById('numquest').value;

将导致num_q计算为空字符串。因此你的循环不会有任何影响。您可以尝试为输入提供默认值,并使用类似的方式稍微访问其值:

<input type="text" name = "numquest" id ="numquest" value="1" size="5" style="" disabled>
//JS
num_q= parseInt(document.getElementById('numquest').value, 10);

最重要的是,我必须同意Saravana,将所有内容都放在$(document).ready函数中是更好的方法。