Question

50

this.offset is not a function within a click function

rated 0 times [ 57] [ 7] / answers: 1 / hits: 24665 / 8 Years ago, tue, april 19, 2016, 12:00:00

The error is that _this.offset is not a function. I logged this to the console and it was the <li> element I clicked on, so I am confused why this would not work.

$('.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)

});

#replace {

  height: 50px;

  width: 100px;

  background-color: green;

}



#list {

  height: 200px;

  overflow-y: scroll;

}



.item {

  height: 50px;

  width: 100px;

  background-color: blue;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js></script>

<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>

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.

I created a jsfiddle to show the error: https://jsfiddle.net/v5fjjwmj/2/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 8 Years ago alexander · Accepted Answer

this (and hence _this) inside your event handler refers to a DOMElement which doesn't have the offset() method as that's part of jQuery. To fix this you can create a jQuery object using $(this):

$('.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.