The requirement was to paint only the values in descending order as they are the popular searches within the website. Whether we use for in loop or jquery each construct which does the same thing if the variable is an object, our results were varying across browsers namely Google chrome. The reason being in chrome, the key values were seen as array index instead of object key properties. The key values here were treated as indexes (integer indexes) and were painted in reverse order.
In Firefox and IE, we will get
“animation apple barbara beery video cheese sticks games bbq pork sticks asian chicken tenders bake banana”
and in chrome
“banana bake asian chicken tenders bbq pork sticks games cheese sticks video barbara beery apple animation”
Convert the object into array, reverse it for chrome browser and then the finally load the dom object.
Note: In case the key was a text then the order of rendering is same across the browsers.
The new .on() and .off() methods provides ways of attaching and removing event handlers to the currently selected set of elements in the jQuery object. $(el).on () gives the developers an unified way of binding events for any event types, direct and delegated events. It also allows you to bind more than one events at the same time by passing an object .
// An example of binding a click event in before version 1.7 and version 1.7 is illustrated below:
$(“a#vikas”).click(Handler); // Click event before jQuery 1.7
$(“a#vikas”).bind(“click”, Handler); // Binding click event before jQuery 1.7
$(“a#vikas”).on(“click”, Handler); // Click event in jQuery 1.7
// Similar example for .delegate() and .undelegate() methods is shown below:
$(‘.container’).delegate(‘a.vikas, ‘click’, Handler);
$(‘.container’).undelegate(‘a.vikas, ‘click’, Handler);
//Above code can be replaced by the following code in the version 1.7
$(‘.container’).on(‘click’, ‘a.vikas, Handler);
$(‘.container’).off(‘click’, ‘a.vikas, Handler);