Question

我有以下代码，效果很好

     for(var i = 1; i <= 3; i++) {
         $('#boxes').append('<textarea onKeyUp="saveanswers()" class="input-sm" >')
     }

但是不应用类'input-sm'，因为此函数已准备好文档。

我怎样才能解决这个问题？

编辑：

此代码创建3个文本区域。类'input-sm'应该以某种方式设置框的样式。但是，由于此功能在文档就绪时发生，因此不会应用样式。我该如何解决这个

编辑2：

我已经能够解决这个问题，但div'框'位于其他项目后面，并且具有高z-index

Answer 1

例如试试这个

<强> Working Demo

$( document ).ready()
{
    for(var i = 1; i <= 3; i++) {
         $('#boxes').append('<textarea onKeyUp="saveanswers()" class="input-sm'+i+'" >')
     }
}

<强> CSS

.input-sm1
{
    background-color:blue;
}
.input-sm2
{
    background-color:yellow;
}
.input-sm3
{
    background-color:green;
}

Answer 2

您的JS必须存在冲突，因为您的代码是正确的。我做了一个测试并且有效：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
jQuery(function($){

  for (var i=0; i<3; i++) {
    $("#boxes").append('<textarea onKeyUp="saveanswers()" class="input-sm" >');
  }

  console.log( $("textarea.input-sm").length ); // 3 

})
</script>

<div id="boxes">
  <input type="text" name="name" id="name" />
  <input type="text" name="email" id="email" />
</div>

尽量不要使用'“onKeyUp =”saveanswers（）“'，留下”污染“的代码，因为你已经在使用jQuery，做一个绑定（http://api.jquery.com/category/events/）

$("textarea.input-sm").keyup(function() {
  alert( "Handler for .keyup() called." );
});

Answer 3

您应该使用首选方法将元素附加到DOM。请注意，在我的示例中，我创建了一个jQuery对象，包装了一个<textarea/>元素，然后允许我在对象上调用jQuery函数;在这个例子中：keyup和addClass

示例

for(var index = 0; index <= 3; index++) { $("#boxes").append( $("<textarea/>") .addClass("input-sm") .keyup(function() { saveanswers(); }) ); }

这是jsFiddle demo

在文档准备好上应用课程

3 个答案: