4

I have one main "Div" on which after clicking it gets split into n X n matrix. On every click inside it with a random colour div. Until here it's fine, now I want to create a click function on that random colourful div which currently is on any where inside the whole main "div"..

$(window).load(function() { var no = 1, $m = $(".main_div"), size = 200; $m.live('click', function() { no++; var n = no * no, i, _size; $m.empty(); for (i = 0; i < n; i++) $m.append($('<div title=' + i + '/>')); _size = size / no; $m.find('> div').css({ width: _size, height: _size }); var colors = ["#FFFFFF", "#CC00CC", "#CC6699", "#0099CC", "#FF99FF"]; var rand = Math.floor(Math.random() * colors.length), randomTotalbox = Math.floor(Math.random() * $('.main_div div').length); $m.find("div:eq(" + randomTotalbox + ")").css("background-color", colors[rand]); var rand = Math.floor(Math.random() * colors.length); }); });
 .main_div { width: 200px; height: 200px; background-color: #9F0; } .main_div > div { float: left; box-shadow: 0 0 1px #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main_div" id="demo"> </div>

Here is a fiddle...Code

Improve this question
2
  • Save the object for the "random <div>" into a variable as soon as you find it, then do whatever you want with it. No rocket science. Commented Oct 21, 2014 at 16:49
  • @ivan_pozdeev-I tried that also but it was not working from me...Please see the fiddle of the same..link Commented Oct 21, 2014 at 16:59

2 Answers 2

Reset to default
1

so you are saying that the clickable div is added to the DOM whenever you click(for example on a button )

that means that those divs were not there in the beginning so you can use

the Babak Naffas answer and also the .delegate method

example 

$('body').delegate('.main_div > div','click',function(){ // here goes your instructions });

for more details you can check: jQuery: difference between .click() AND .on("click")

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@hamism- Yea! I guess u r getting me 80% correct..i am saying i hve already that random div inside in my main div..So i just want click on tht random dov only rather then anywhere in the main div..Please check this link
you can add a class to all the divs that you want to be clickable for example class ='clickable' then in your jquery code use $('.main_div .clickable') i hope that is what you want to achieve
@hamism- Actually i don't want clickable div at predefined position..It should be at random place..Please see the following link..it's a game .But i am trying exactly same..link
@sanjay but when you are appending ('<div title=' + i + '/>') to $m you don't know the position of the new inserted div and the class that i was talking about is added like this ('<div title=' + i + ' class="clickable" />')
0

If you're asking for an event to be triggered when the NxN <div>s that make up the matrix are clicked, you could try 

 $(".main_div > div").on('click', function (evt) { ... } );

This will attach the function (the 2nd parameter) to the click event of the <div> from the matrix just like the CSS class you have with the same selector.

Improve this answer

1 Comment

Yea!Right now also i am able to click on that n X n div that are formed.Bur specifically i am expecting click on the random colorful "div" which is formed on evry click.Please check following feddle code of same.So that you may get idea exactly what I am expecting.. Thanks for giving me ur time..link

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.