Question

I am creating a div dynamically, then appending it to a container:

var str = '<div class="dimsdiv" id="'+dim.src+'" cursor:pointer;"></div>'; 
$('#fpdiv').append(str);

Now I need to add a hover even to those divs. I tried to just reference it, but then found that I needed to consider .on() instead. I tried this (before on):

$('#'+dim.src).hover(function{},function{});

But as expected, that didn’t work. I also tried this:

$('#'+dim.src).on('hover','(function{},function{})');

but can’t seem to get the syntax just right. Can someone help here?
Thanks in advance.

Answer 1

You may try this

var str = $('<div/>', {
    text:'Hello',
    class:'dimsdiv',
    id:'dim_src',
    style:'cursor:pointer',
    mouseenter:function(){ ... },
    mouseleave:function(){ ... }
});
$('#fpdiv').append(str);

Also remove the . from dim.src, instead use dim_src as id, it’s used as class selector in jQuery, not sure why you used it tho but $('#'+dim.src) is invalid.

DEMO.