Hi im trying to add into new div into exist div by clicking that div and i should do same thing for new div. For example, I have initial div, when i click it i created different div inside it. Then i click new div and i created new div inside it. I hope explanation is understandable =) Here is my code,
<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>
The problem my javascript isnt working there is nothing when i click div with this code.
Basic idea of what you are after.
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>
Here man: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;
}
When you call the function run, the parameter passed is an object javascript, not an id of element, you could do this way
var id = $(id).attr("id");
Oh, what an old version of jQuery you're using!! :( You would need to use a delegated click event using the jQuery .live() method. You may not be able to distinguish the new divs because (1) they are absolutely positioned (2) they have the same background color:
$('.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>
