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 IE9+?

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

Sean Adkinson · Accepted Answer · 2014-04-12T19:13:23.447

4

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');

edited Apr 12 '14 at 19:13

answered Apr 12 '14 at 18:35

Sean Adkinson

8,425
3
45
64

Just tried the jQuery solution, whilst it works; if the data changes without a page reload it fails to return the new value - it still returns the previous value. – Brett Apr 12 '14 at 18:58
1

The jquery `data()` method must not be doing 2-way binding with the HTML attribute. That is, I bet it just reads the attribute the first time, and doesn't revisit the DOM. Maybe just use the `attr` method: `$target.attr('data-change')`. I'll update the answer. – Sean Adkinson Apr 12 '14 at 19:09
@SeanAdkinson -- Correct. The `data()` method will read the `data-*` attributes the first time it is invoked, but there is NOT two-way binding since the `data` method can take more complicated objects and not just primitives. – Jeremy J Starcher Apr 12 '14 at 19:15
Thanks @JeremyJStarcher, I found the explanation in the jquery documentation and updated the answer. That makes sense about the more complicated objects. – Sean Adkinson Apr 12 '14 at 19:19

score 1 · Answer 2 · answered Apr 12 '14 at 18:36

1

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;

answered Apr 12 '14 at 18:36

bobthedeveloper

3,733
2
15
31

score 0 · Answer 3 · edited Mar 09 '23 at 14:46

0

use

var item_id =  $(this).attr("data-item")

etc. inside click event

edited Mar 09 '23 at 14:46

Moritz Ringler

9,772
9
21
34

answered Apr 12 '14 at 18:37

vhr

1,528
1
13
21

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

3 Answers3

Linked