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

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. 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
    – sanjay
    Oct 21, 2014 at 16:59

2 Answers 2

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")

4
  • @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
    – sanjay
    Oct 21, 2014 at 17:09
  • 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
    – ismnoiet
    Oct 21, 2014 at 17:26
  • @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
    Oct 21, 2014 at 17:34
  • @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" />')
    – ismnoiet
    Oct 21, 2014 at 17:47
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.

1
  • 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
    – sanjay
    Oct 21, 2014 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.