Having problems in IE8 when attempting to get data from target event

Question

I have code such as this..

// Get some data
var id = event.target.id;
var flag_status = event.target.dataset.change;
var winner_id = event.target.dataset.winner;
var item_id = event.target.dataset.item;

"Normal" browsers like Firefox and Chrome get the values with no problems and everything works great; however nothing is happening with IE8 so I'm assuming it can't get the data.

The event parameter is passed to this function via this code:

$('.shipping_status').click(function(event) {

    event.preventDefault();

    // Update Shipping Status
    updateShippingStatus(event);

});

..and then in turn gets it when one of these example elements is clicked:

<a title="Item Being Processed" class="shipping_status processing" data-item="102383" data-winner="172" data-change="0" id="processing_102383" href="#"></a>                            
<a title="Item Posted" class="shipping_status posted active" data-item="102383" data-winner="172" data-change="1" id="posted_102383" href="#"></a>
<a title="Problem With Item" class="shipping_status problem" data-item="102383" data-winner="172" data-change="3" id="problem_102383" href="#"></a>
<a title="Item Delayed" class="shipping_status delayed last" data-item="102383" data-winner="172" data-change="2" id="delayed_102383" href="#"></a>

Is there a way I can get this to work with IE8? ...additionally, I don't have IE9+ to test with - does anyone know if it works in > IE8?

I have also tagged this with jQuery if there us alternative way to get this data with jQuery that will work with IE8 as well.

Answer 1

Looks like IE just started supporting the dataset attribute in IE11: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Try just using getAttribute():

var flag_status = event.target.getAttribute('data-change');
var winner_id = event.target.getAttribute('data-winner');
var item_id = event.target.getAttribute('data-item');

If you are using jQuery, it makes this easy using the data() method:

var $target = $(event.target);
var flag_status = $target.data('change');
var winner_id = $target.data('winner');
var item_id = $target.data('item');

Only use data() if the attributes on the HTML element won't change. From jquery documentation:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

If you need to re-read HTML attributes that change, just use the attr() method:

var $target = $(event.target);
var flag_status = $target.attr('data-change');
var winner_id = $target.attr('data-winner');
var item_id = $target.attr('data-item');

Answer 2

You can't use event.preventDefault() in IE8, but you should use event.returnValue instead.

A solution would be: (event.preventDefault) ? event.preventDefault() : event.returnValue = false;

Answer 3

use var item_id = $(this).attr("data-item") etc. inside click event