How to get the id of a div from mouseenter function? - php

Question

I need to get the id of the productbox div in this jquery code.i tried $this.attr('id) but the result is object object or undefined.how can i get the id of productbox div? thanks in advance
Javascript:
$('body').on('mouseenter', 'div.productbox', function()
{
buttonDiv = $(this).children('div.roll');
myTimeout = setTimeout(function()
{
Divid = ?;
buttonDiv.toggle();
}, 500);
});
$('body').on('mouseleave', 'div.productbox', function()
{
buttonDiv.hide();
clearTimeout(myTimeout);
});
$('body').on('hover', 'div.productbox', function()
{
var buttonDiv = $(this).children('div.roll1');
buttonDiv.toggle();
});
HTML:
<div id="40" class="productbox">
<span class="new">Yeni</span>
<div class="roll" style="display: none;">
<input type="button" value="139"> Like <input type="button" value="34"> Comment
</div>
<div class="productpicture" onclick="rload(40)">
<img style="margin:auto; width:180px;overflow:hidden;display:block" src="pictures/40.jpg">
</div>
<div class="ps">
<div class="productname">Giysi</div>
<div class="companyname" onclick="go('2');">Koton</div>
<div class="price">9.99 TL</div>
</div>
</div>

Answer 1

You can take advantage of closure like this:
<script type="text/javascript">
$('body').on('mouseenter', 'div.productbox', function()
{
var $productBox = $( this );
buttonDiv = $productBox.children('div.roll');
myTimeout = setTimeout(function ()
{
Divid = $productBox.attr('id');
buttonDiv.toggle();
}, 500);
});
$('body').on('mouseleave', 'div.productbox', function ()
{
buttonDiv.hide();
clearTimeout(myTimeout);
});
$('body').on('hover', 'div.productbox', function ()
{
var buttonDiv = $(this).children('div.roll1');
buttonDiv.toggle();
});
</script>
<div id="40" class="productbox">
<span class="new">Yeni</span>
<div class="roll" style="display: none;">
<input type="button" value="139">
Like
<input type="button" value="34">
Comment
</div>
<div class="productpicture" onclick="rload(40)">
<img style="margin:auto; width:180px;overflow:hidden;display:block" src="pictures/40.jpg">
</div>
<div class="ps">
<div class="productname">Giysi</div>
<div class="companyname" onclick="go('2');">Koton</div>
<div class="price">9.99 TL</div>
</div>
</div>

Answer 2

The reason you are getting 'undefined' etc is because you are actually requesting the window for its ID.
What you need to do is declare a local variable for the div and then inside your timeout use that variable to get the ID.
$('body').on('mouseenter', 'div.productbox', function() {
var $this = $(this);
var buttonDiv= $this.children('div.roll');
var myTimeout = setTimeout(function() {
var Divid= $this.attr('id');
buttonDiv.toggle();
}, 500);
});

Answer 3

you need to do this:
$('body').on('mouseenter', 'div.productbox', function() {
myTimeout = setTimeout((function(self) {
return function() {
buttonDiv = $(self).children('div.roll');
Divid= $(self).attr("id");
console.log(Divid);
buttonDiv.toggle();
}
})(this), 500);
});
check the JSFiddle for complete working code: http://jsfiddle.net/kBRyu/2/