0

So I have a div that is created onclick from another div which is working fine.

I am appending to document.body because it is supposed to be a pop up.

When I assign a hover handler to the new div, it compiles and shows in the inspector, but does not actually fire the events, which are both console logs.

I am not sure why it would show as an event in the inspector and not work but, I get things usually don't work correctly the first time.

Here is the code in its entirety.

$(function(){
$('.trackOptions').click(function(e){
    id = this.id;
    var x = e.pageX-20 + 'px';
    var y = e.pageY-20 + 'px';
    var div = $('<div class ="optionsPop">').css({
        "position": "absolute",                    
        "left": x,
        "top": y
    });
    $(document.body).append(div);   

});

$(document).on('hover', '.optionsPop',
    function(e){
        console.log('Hovering');
    },
    function(e){
        console.log('Out of optionPop Hover');
        $(this).remove();
    }
);
});
Sam Alexander
  • 504
  • 1
  • 6
  • 24
  • 1
    Here is some workaround: http://jsfiddle.net/aL6sgzkq/ – blex Jul 02 '15 at 20:37
  • you're going to [suffer other problems](http://stackoverflow.com/questions/30789340/how-to-prevent-divhover-transitions-from-being-disabled-by-javascript-div-style) if you continue defining styles in javascript, especially where hover is concerned, try add / remove class functionality – Toni Leigh Jul 02 '15 at 20:58
  • Thanks but the x and y are necessary from JS because I need it in that specific spot.... The absolute could definitely be put in a class in css though – Sam Alexander Jul 02 '15 at 21:38

0 Answers0