I’ve been helping someone by developing some categories/result selection code.
The trouble is, that even though the tests all pass with flying colors, and the tests do seem to all work, the user experience seems to be different from that which is intended.
The problem is that this code gets triggered, even when you are outside of the area, and are clicking things that aren’t checkboxes.
$(container).on("click", ":checkbox", function (evt) {
console.log("green area checkbox click");
return clickHandler(evt);
});
Some simplified example code is at http://jsfiddle.net/L82sgpcw/32/
Clicking on a category in the green section correctly shows and hides the appropriate result. But, clicking the result close button in the blue area has unexpected behaviour.
The first time you click a close button it actually triggers the green section click code, even though the whole results section is not in the same area as the green section event handler. The second time you click the close button the result properly goes away.
I spent several hours too much of time investigating the cause of the problem. In the end I found that it was caused by an earlier choice being too clever by half.
Please delve into the structured code to see if you can find the cause of the problem.
Why does the close button in the blue results section, trigger a category click event in the completely unrelated green section? I found it to be quite an educational process, and am pondering a solution or two to remedy the issue.