javascript - 如何创建一个带有在 div 元素上调用方法时动态使用的 id 的 div 元素?

标签 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 随处可见? 提前感谢您的任何想法。

最佳答案

您可以在 $document ready 中创建 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
    });

关于javascript - 如何创建一个带有在 div 元素上调用方法时动态使用的 id 的 div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20392377/

相关文章:

javascript - PromisifyAll - 回调不是函数

javascript - 无法访问外部 css 或 javascript 文件

javascript - 使用 Ajax 制作添加监视列表按钮功能 (PHP)

HTML - div 中的第一个文本不会被下推

html - 仅在悬停时显示文本

html - 使用 MSO 条件 &lt;!--[if !mso]> 时 Outlook.com 中的空 HTML 电子邮件

html - CSS 元素对齐

css - 多个高度框都在顶部

javascript - 向我的下划线模板添加一个计数

html - 使用 css 禁用工具提示