使用 onClick() 添加新的 div 到现有的 div

Question

您好，我正在尝试通过单击 div 将新的 div 添加到存在的 div 中，我应该对新的 div 做同样的事情。例如，我有初始 div，当我单击它时，我在其中创建了不同的 div。然后我点击 new div 并在其中创建了 new div 。我希望解释是可以理解的 =) 这是我的代码，

<script type="text/javascript" src="js/jquery-1.4.2.min.js">

function run(id){

var id = $(id).attr("id");
document.getElementById(id).onclick = function () {
var div = document.createElement('div');
   div.style.backgroundColor = "black";
   div.style.position = "absolute";
   div.style.left = "50px";
   div.style.top = "50px";
   div.style.height = "10px";
   div.style.width = "10px";

   document.getElementById(id).appendChild(div);
};

}


<style>

div.initial {
background-color:white;
width:400px;
height:30px;
}
</style>

    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div class='initial' onclick='run(this)'>
      //new div will come here
    </div> 

</body>
</html>

问题是我的 javascript 无法正常工作当我使用此代码单击 div 时什么也没有。

Answer 1

这位先生：http://jsfiddle.net/leojavier/gbuLykdj/2/

  <div class='initial'>
      //new div will come here
    </div>

JS

$('.initial').on('click',function(){
    var template = "<div class='newDiv'></div>";
    $('.initial').append(template);
})

CSS

div.initial {
background-color:white;
width:400px;
height:auto;
}

.newDiv{
    width:20px;
    height:20px;
    background:blue;
    margin:2px;
}

Answer 2

你所追求的基本想法。

function run (){

  var div = document.createElement("div");  //create new div
  div.addEventListener("click", run);       //bind click to new div
  this.appendChild(div);                    //append the new div to clicked div
  this.removeEventListener("click", run);   //remove the original click event
  
}
document.getElementById("start").addEventListener("click", run);  //bind the initial click event

html, body { height: 100%; }
div {
  border: 1px solid black;
  width: 90%;
  height: 90%;
}

<div id="start"></div>

Answer 3

当你调用函数运行时，传递的参数是一个对象javascript，而不是元素的id，你可以这样做

var id = $(id).attr("id");

Answer 4

哦，你用的是多么老的 jQuery 版本！！ :( 您需要使用 jQuery .live() 方法来使用委托点击事件。您可能无法区分新的 div，因为 (1) 它们是绝对定位的 (2) 它们具有相同的位置背景颜色：

$('.initial').live('click', 'div', function(e) {
    e.stopPropagation()
    $('<div/>').css({
        'background-color': 'black',
        'position': 'absolute',
        'left':'50px',
        'top':'50px',
        'height': '10px',
        'width': '10px'
    })
    .appendTo( e.target );
});

$('.initial').live('click', 'div', function(e) {
    e.stopPropagation();
    var randomColor = ['black', 'red', 'yellow', 'blue', 'green', 'orange', 'gray'],
        randomN = Math.round( Math.random() * (randomColor.length - 1) );
    $('<div/>').css({
        'background-color': randomColor[ randomN ],
        'left':'25%',
        'top':'25%',
        'height': '60%',
        'width': '15%'
    })
    .appendTo( e.target );
});

div.initial {
background-color:white;
width:400px;
height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class='initial'>
  click here:
</div>

使用 onClick() 添加新的 div 到现有的 div

Adding new div into exist div with using onClick()

html

javascript

onclick

getelementbyid