Question

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

image.cc=1;
function changeimage(image)
{
if (image.cc==0) 
  {
  image.cc=1;
  $(image).attr('src', 'images/white_contact.png');
  }
else if (image.cc==1)
  {
  image.cc=2;
  $(image).attr('src', 'images/yellow_contact.png');
  }
  else if (image.cc==2)
  {
  image.cc=3;
    $(image).attr('src', 'images/green_contact.png');
  }
    else
  {
  image.cc=0;
    $(image).attr('src', 'images/red_contact.png');
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
  $('#newdiv').append('<div id="div"'+i+'" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');

     $('#newdiv').find('#div'+i).append('<table border="0"><tr>'+
    '<td>Name:</td>'+
    '<td><input type="text"></td>'+
  '</tr><tr>'+
    '<td>Title:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
  '<tr>'+
    '<td>Contact:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
'</table>');

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable();

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>
    </p>

</body>
</html>

为什么我尝试将文本框附加到div上，似乎没有显示为结果？我现在应该怎么做？谁能告诉我它有什么问题？..................................我只看到了图像和“ex”div的背景颜色。

Answer 1

只需删除div和'+ i +将"div"'+i+'"更改为"div'+i+'"

之间的双引号

您的最终代码

    <html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

image.cc=1;
function changeimage(image)
{
if (image.cc==0) 
  {
  image.cc=1;
  $(image).attr('src', 'images/white_contact.png');
  }
else if (image.cc==1)
  {
  image.cc=2;
  $(image).attr('src', 'images/yellow_contact.png');
  }
  else if (image.cc==2)
  {
  image.cc=3;
    $(image).attr('src', 'images/green_contact.png');
  }
    else
  {
  image.cc=0;
    $(image).attr('src', 'images/red_contact.png');
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
  $('#newdiv').append('<div id="div'+i+'" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');

     $('#newdiv').find('#div'+i).append('<table border="0"><tr>'+
    '<td>Name:</td>'+
    '<td><input type="text"></td>'+
  '</tr><tr>'+
    '<td>Title:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
  '<tr>'+
    '<td>Contact:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
'</table>');

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable();

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>
    </p>

</body>
</html>

PS.Using onClick或绑定点击功能是一回事。

Answer 2

而不是使用onClick使用：

$("#btn1").click(function(){
    // Your script to add the form
});

请参阅我放置jsFiddle的示例：http://jsfiddle.net/DUU5v/2/

Answer 3

您还有一个额外的“，请参阅此http://jsbin.com/uwiric/1/edit

$('#newdiv').append('<div id="div' + i + '" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');
                                 ^ You have one extra " here

为什么文本框没有出现

3 个答案: