<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.
(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”.
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?
[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.
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.
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