We just stumbled across an imcompatibility between the two jQuery versions which is breaking one of our applications. The problem came up when updating from 1.7 to the latest 2.1 version, but was narrowed down to a difference between 1.8.0 and 1.8.1.
I've built a fiddle here (1.8.0, working) and here (1.8.1, broken).
HTML
<div class="outer">
<div class="eventcontext">
<a href="#targetNope" class="hasevent">Click me!</a>
</div>
</div>
JS
$('.eventcontext').on('click', '.outer a.hasevent', function(e) {
e.preventDefault();
e.stopPropagation();
$('#targetYep').show();
});
In 1.8.0 using a selector that matches the desired elements, with part of the selector being "above" the events context works without any problems, the same way the native querySelector
does, while in 1.8.1 it does not.
Was this an intentional change or can we expect this to be "fixed" at some point? I'm wondering if this might be a bug, as it happened in a patch version update, breaks stuff (at least in our case), but is still the same in the latest versions.
From the jQuery 1.8.1 Change Log:
Events: #12383: jQuery.on() selector should only apply to descendants of the element
So when you remove .outer
from selector it works.
Also working because selector is descendant of element that handles the click:
$('.outer').on('click', '.eventcontext a.hasevent', function(e) { /**/ });
$('.outer').on('click', 'a.hasevent', function(e) { /**/ });
Guessed reason for the change: The old versions had to search the whole document to find elements matched by the selector, which is slow. And for event-delegation it doesn't make sense to search outside the element that handles the event.