爲什麼文本框沒有出現

<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的背景顏色。爲什麼文本框沒有出現

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

看到我已經穿上的jsfiddle的例子：

來源

2013-06-02 user2399158

提示的礦是構建新的div和它的孩子使用jQuery，而不是一個長期DOM字符串。使得它更易於維護。像[這] （http://jsfiddle.net/R6PmH/） – Kiruse

只是刪除格之間的雙引號和「+ 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.使用onClick或綁定點擊功能是一回事。

來源

2013-06-02 08:18:33 Dru

它仍然沒有工作 – user2399158

嘗試上面的更新代碼，它工作正常 – Dru

如何使它保持在灰色的顏色格內，現在文本框不在格 – user2399158

而不是使用onClick使用http://jsfiddle.net/DUU5v/2/

來源

2013-06-02 08:11:23 ajtrichards

這不會解決問題，http://stackoverflow.com/users/2399158/user2399158正在嘗試創建元素div0，div1等div和當前的代碼創建所有使用相同ID「div」的div – Dru

你有一個額外的」，看到這個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

來源

2013-06-02 09:24:21

爲什麼文本框沒有出現

回答

相關問題