jQuery.Deferred exception: Cannot read property 'defaultView' of null

JavaScript
1 
<script>
  $(function(){
    var box = $('#img-container1');
    box.data('oldPadding',$(this).css('padding'));
    alert('A');
  });
</script>

JQuery works fine without the line “box.data('ol…” but when I add this line it gives this error:

jquery-3.2.1.min.js:2 jQuery.Deferred exception: Cannot read property 'defaultView' of null TypeError: Cannot read property 'defaultView' of null
    at Na (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:18794)
    at Oa (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:19773)
    at Function.css (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:22263)
    at http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:23430
    at T (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:544)
    at r.fn.init.css (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:3:23267)
    at HTMLDocument.<anonymous> (http://localhost:63342/jquery/index2.html:22:35)
    at j (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:2:29999)
    at k (http://localhost:63342/jquery/js/jquery-3.2.1.min.js:2:30313) undefined

I’m sure about the id “img-container1”. I Googled this, others have had the same problem too but I couldn’t find the solution to this error. TYIA.

2

What does your HTML look like?

3

What is the this keyword supposed to refer to? That’s what’s going to be causing the problem.

1 Like
4

(I’m a beginner) First I’m getting the id “img-container1” which is a div in my HTML and an object in DOM. Here I’ve used the JQuery function $() so my div is caught as a JQuery object. Then I put it in the “var box”. Now when I use JQuery method “data” on the “box”, I expect the div to be the referent(antecedent) of the “$(this)”, since it’s the JQuery object that has invoked the method “data”.

5

Shouldn’t it be this: :slight_smile:

box.data('oldPadding',box.css('padding'));

I believe data attributes should not use capital letters either.

2 Likes
6

The this keyword doesn’t work in the way that you expect. There needs to be an execution context from which the this keyword is used.

jQuery’s this: demystified

3 Likes
7

Thank you, but why should I repeat “box”? Isn’t it like saying: “I like John, John is a good player.”? AFAIK $(this) can be used inside a function(or method) that has been invoked by an object to refer to that object. Can you please tell me what’s wrong in my understanding?

8

[quote=“mojtabaavahdati, post:7, topic:286110, full:true”]
AFAIK $(this) can be used inside a function(or method) that has been invoked by an object to refer to that object.[/quote]

That’s right. But in your example, there is no function or method invoked by box, inside of which you can use this.

1 Like
9

But how such thing could be possible? Here are two articles that call data a method:
https://api.jquery.com/data/ :

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

10

It is the execution context that applies to the this keyword.

When you are in an each method, it is the execution context of each element that the this keyword refers to.

$("p").each(function () {
    // the this keyword refers to each p
});

With your code example. the execution context is the jQuery wrapper:

$(function() {
    // the this keyword refers to the execution context of the jQuery wrapper
});

Where you assign attributes to the box data, you are still within the execution context of the jQuery wrapper. Notice how no new function has occurred, such as with the each method:

// nothing here defines a new execution context
box.data('oldPadding',$(this).css('padding'));
// so the this keyword refers to the context that it's in, that being the jQuery wrapper

Here’s some further information about Execution context, Scope chain and JavaScript internals that can help you to understand more about how the execution context, and how the this keyword works.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.