gsamaras gsamaras - 3 months ago 10
HTML Question

Correct way of Caching and this when using jQuery

When using jQuery, caching is very important, and it seems I have forgotten the related principals. When I cache something, how can I re-use it inside function

on()
?

Example:

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click', function() {
var index = $('#pagination-demo').find('.active > a')[0].innerHTML;
...
});


As you can see here, I am calling jQuert again to find the id, shame on me! Is there a way to do it with
this
?

var index = this.find('.active > a')[0].innerHTML;


or:

var index = $(this).find('.active > a')[0].innerHTML;


But I am not sure what will
this
hold inside the body of
on()
. What is the correct way to do this?

Answer

From what I understand you want to use the jquery object that you created inside the call-back you registered via on as well.

From the official docs :

In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do $( this )

But in this case as well you will have to construct the jQuery object again. Not as costly as using a selector to find an element but none the less.

One solution to the problem might be to use the event.data property

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click',{ cachedElement:paginationDemo},function(event) {
  var index = event.data.cachedElement.find('.active > a')[0].innerHTML;
  ...
});

This way you can reuse the original jQuery object and acheive what you wanted from cacheing.

UPDATE :

Inside the call-back passed to on, the key word this refers to the underlying DOM object. When we use this idiom : $(this) we are constructing a fresh jQuery object. However it is not the same as the jQuery object stored in paginationDemo variable. In other words both the jQuery objects will act on the same DOM element. However their references are different

event.data.cachedElement === $(this)
>false