Shawn123 Shawn123 - 7 months ago 9
HTML Question

this.offset is not a function within a click function

I created a jsfiddle to show the error.

https://jsfiddle.net/v5fjjwmj/2/

The error is that _this.offset is not a function. I console logged this and it was the

<li>
element I clicked on, so I am confused why this would not work.

HTML

<div id="replace">
Replace this
</div>

<ul id="list">
<li class="item">TEST</li>
<li class="item">TEST</li>
<li class="item">TEST</li>
</ul>


JS:

$('.item').click(function(e){
var _this = this;
var topx = _this.offset().top;
var leftx = _this.offset().left;
var moveArea = $('#replace').offset().top;
var moveLeft = $('#replace').offset().left;
var moveUp = topx - moveArea - 50;
_this.css('position', 'absolute').css('top', moveUp).css('zIndex', 50).css('left', leftx);
_this.animate({
top: -50,
left: moveLeft
}, 300)
});


CSS:

#replace {
height: 50px;
width: 100px;
background-color: green;
}

#list {
height: 200px;
overflow-y: scroll;
}

.item {
height: 50px;
width: 100px;
background-color: blue;
}


I also want to create an animation such that the item I click in the list moves up to replace the green "Replace this" box, if someone could help with that too.

Answer

this(and hence _this) inside event handler refers to a DOMElement which doesn't have the offset() method. You need to use a jQuery object:

$('.item').click(function(e) {
    var $this = $(this);
    var topx = $this.offset().top;
    var leftx = $this.offset().left;
    var moveArea = $('#replace').offset().top;
    var moveLeft = $('#replace').offset().left;
    var moveUp = topx - moveArea - 50;

    $this.css({
        'position': 'absolute',
        'top': moveUp,
        'zIndex': 50,
        'left': leftx
    }).animate({
        top: -50,
        left: moveLeft
    }, 300)
});

Also note the use of the object provided to a single css() call over multiple calls to the same method.