0

I am having trouble with a seemingly simple Jquery function.

Basically, the small/med/big etc. buttons create a grid of >div>s within a >div>. They all have a class of .colorblock I want to add a class or change the background color upon hovering over these divs.

I've included the jsfiddle (but I'm creating this on my own computer - ignore the fact that the button box butts into the grid on jsfiddle, I can fix that...eventually), and copied the 'problem areas' below. The grid is created successfully, but I can't get anything to interact with the <\div class="colorblock"> after that.

https://jsfiddle.net/pqtn50fc/4/
Also - is there a way to use a variable defined earlier in jQuery directly in the 

 .append('<div style="height: jVARIABLE"> </div>')

? It's simpler to calculate the size and put it in the loop instead of making different loops for each div. I tried changing all the divs after they were created but it kept lagging/freezing.

HTML____________

    <div id="colorspace">

    </div>

CSS____________

.colorblock {
  float: left;
  outline: 2px solid blue;
}

.black {
 background-color: black;
}

.smallcolorblock {
  width: 21.875px;
  height: 21.875px;
}

JQUERY____________

var smallH = '<div class="smallcolorblock colorblock"></div>'

$('#small').click(function(){
    $('.colorblock').remove();
    for (var i = 1; i <= 32*32 ; i++) {     
        $('#colorspace').append(smallH);
        };

$('.colorblock').hover(function(){
    $(this).css("background", getRandomColor()),
    function(){
        $(this).css("background", "white");
    };

 $('.colorblock').hover(function() {
     $(this).addClass("black");
   });
MindingData
  • 9,939
  • 5
  • 38
  • 56
henrythedj
  • 78
  • 2
  • 11
  • 1
    Since you are creating the element after, you may need to delegate the event try with `$('#colorspace').on('hover','.colorblock',function(){ ---- ` – DaniP Jun 01 '16 at 19:59
  • Bind to a container and use the .on method. http://api.jquery.com/on/ – nurdyguy Jun 01 '16 at 19:59
  • @nurdyguy - I'll try that now, thanks! – henrythedj Jun 01 '16 at 20:04
  • @paul roub - thanks, I didn't know how to find that question -looks like it answers as well – henrythedj Jun 01 '16 at 20:05
  • @HenryHardingMcCall This is a very commonly asked question. Paul was pointing you to http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements which has a much more elaborate answer but is essentially what Dani and I said. – nurdyguy Jun 01 '16 at 20:07
  • @nurdyguy thanks a lot! i had another question deeper in that seems to be asked a lot, but the answers don't put the style directly in the div creation ---from above: Also - is there a way to use a variable defined earlier in jQuery directly in the .append('
    ') ? It's simpler to calculate the size and put it in the loop instead of making different loops for each div. I tried changing all the divs after they were created but it kept lagging/freezing.     – henrythedj Jun 01 '16 at 20:13
  • Depending on scope, you can pull in a javascript variable and use string concatination to do what you are describing. '
    .......'     – nurdyguy Jun 01 '16 at 20:16
  • @nurdyguy thanks a lot, works perfectly. any idea why this .on() statement isn't working? $('#colorspace').on("hover", '.colorblock', function(){ $(this).css("background", "red"); }); – henrythedj Jun 01 '16 at 20:21
  • @HenryHardingMcCall The div that is being appended, does it have a class on it? – nurdyguy Jun 01 '16 at 20:23
  • @nurdyguy yes it does, '.colorblock' - it has two classes, div class = "bigcolorblock colorblock"> and it is getting the CSS attributes from both classes after being appended, but won't change after that – henrythedj Jun 01 '16 at 20:25
  • Is the bind inside of a $( document ).ready(... or similar? https://learn.jquery.com/using-jquery-core/document-ready/ – nurdyguy Jun 01 '16 at 20:27
  • @nurdyguy yes the document.ready surrounds it all – henrythedj Jun 01 '16 at 20:36
  • @nurdyguy I got it to work by changing hover to click, but then it still won't work with hover. I tried adding the second function to hover (to remove the class after the hover ends) and it still won't work. thanks regardless! – henrythedj Jun 01 '16 at 21:12
  • I don't think I've used hover this way but I know I've use mouseenter and mouseleave for this kind of thing. The unfortunate thing is you then need to write the function twice. If you are just changing background color you might also accomplish this via pure css. – nurdyguy Jun 01 '16 at 21:15
  • @nurdyguy I've managed to do a workaround with mouseover for this project. really appreciate you sticking with me haha – henrythedj Jun 01 '16 at 21:24
  • Np, glad you got it working. – nurdyguy Jun 01 '16 at 21:24

0 Answers0