We are using Knockout and jQuery in an application where we need to support IE 8 (among several other browsers). We have a case where we need to use a Knockout click binding for one element and a jQuery click handler for another element. However, we have found that these two styles of click handlers conflict with each other in IE 8 (they work fine together in all of our other supported browsers).
We have distilled the problem down to a simple reproducible example. If you don't have IE 8 on your machine, you can test this out in a newer version of IE by selecting 'Browser Mode: IE8":
With that setting in place, you can view the conflict in this jsbin. This code is:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(function () {
var viewModel = new Object();
viewModel.CanViewPage = true;
viewModel.alertA = function () {
alert("A");
};
$('#B').click(function () {
alert("B");
});
return viewModel;
}());
});
</script>
</head>
<body>
<!-- ko if: CanViewPage -->
<span data-bind="click: alertA">A</span>
<span id="B">B</span>
<!-- /ko -->
</body>
</html>
When you click on "A", the expected alert is shown. However, when you click on "B", the alert("A") is erroneously called:
We have found two "solutions" that fix this problem, but neither one of them are viable for our application. The first way to get these two click handlers to both work in IE 8, is to remove the ko if: CanViewPage. This can be seen in this jsbin. This "solution" is not viable because it is a core page-view permissions mechanism that we use in this large application on many pages.
The second "solution" that we found was to reverse the order of the script tags which import jQuery and Knockout. This can be seen in this jsbin. This "solution" is also not viable because these imports are controlled via a master page wrapper - changing that would require a massive QA effort to retest the entire application for bugs.
Note that since we must support IE8, jQuery 2.x or newer is not an option.
Does anyone have another solution given these constraints? Can anyone explain why this is happening?