Link in drop down select not working IE8/9 to open drop down select link, alert works

Question

It appears IE8 and 9 are giving me grief and I can't think of an alternative.

The following works in Chrome, FF and Safari.

There are two drop downs, each containing two links. Each drop down has it's own corresponding "Buy Now" button. When a drop down selection is made, the url is loaded via jquery and when user clicks "Buy Now" button, a new window opens to the corresponding drop down selection.

In IE8/9 when a user selects a drop down and clicks the buy now button, it throws the alert that selection wasn't made.

See JSFiddle Demo

Jquery:

    $(".buyNow").on("click", function (e) {
     var url = $(e.target).parent().children().find("[data-active]").data("val");
    if (url) {
        window.open(url, "_blank");
    } else {
        window.alert("Please select a bag size.");
    }
})

Answer 1

The problem is the fact the e.target is different than the other browsers. So parent is a different element and it can not find the attriute since it is not a child. Simple debugging will show it.

Use .closest(".someClass") to get the element you are after instead of .parent().

or change

var url = $(e.target)...

to

var url = $(this)...