TypeError: $(...).parents(...).size is not a function

Question

I have a basic script which allows me to click on the website's background, excluding #content.

After upgrading jQuery to 3.1.0 version, I get this error: TypeError: $(...).parents(...).size is not a function.

<script type="text/javascript">
  $(function() {
    $("#background").click(function(e) {
      if (e.target.id == "wrapper" || $(e.target).parents("#wrapper").size()) 
      {
        // do nothing
      } 
      else
      {
        window.open('http://example.com');
      }
    });
  })
</script>`

I don't know how to fix it. jQuery is loaded properly. Please help.

Answer 1

size() was deprecated years ago and removed in version 3 ... use length instead

if (e.target.id == "wrapper" || $(e.target).parents("#wrapper").length)

All you had to do was look this up in the size() docs to find this out

Answer 2

Please use 'length' like @charlietfl suggested. But I was unable to trace from where the error was getting displayed, hence I ended up with below.

(function ($) {
    $.fn.extend({
        size: function () {
            return $(this).length;
        }
    });
})(jQuery);