jquery and data-attr not working in ie8

Question

This concerns a table where I show 5 rows at a time. The follow code is working 100 percent perfect in firefox. But in ie8, only the top row can be clicked for the editdiv to show. Whereas, in firefox I can click on any of the five rows and the editdiv loads as expected.

Line in php file that calls the function:

echo "<td><a id=\"editjq\" href=\"#\" vid='".$vid."' t1='".$db->hscadd($t1)."' page='".$page."' flag='1')\">  [edit ]  </a></td>";

The function:

$(document).ready(function() {
  $('a#editjq').click(function() {
    var petid = $(this).attr('vid');
    var t1 = $(this).attr('t1');
    var page = $(this).attr('page');
    var flag = $(this).attr('flag');
    $("#petdiv").hide(); 
    $.post("edit_lookup.php", {
      petid : petid,
      t1 : t1,
      page : page
    }, function(data){
     if (data.length>0){ 
       $("#editdiv").html(data); 
     } 
    });
    $(this).unbind(); 
    return false;
  }); 
});

Answer 1

Are you producing five rows which each have an anchor with the same id attribute? If so, that's your problem. It is syntactically illegal to have more than one element with the same id . Instead of id="editjq" use class="editjq" and $('a.editjq').click(...) .

Answer 2

You could put this piece of jquery plugin code in your page script (just make sure that it comes after the jquery.min.js script tag);

    (function($){            
    var store = {};
    $.fn.extend({  
        collection : function(action, name, value) {
            var $this = this;

            var generate = function(){
                return "COLLECTION" + parseInt((Math.random() * 100000), 16);
            }

            var item_id;
            var methods = {
                put: function(){
                    item_id = $this.attr("id");
                    if(store[item_id]){
                        store[item_id][name] = value;
                    } else {                
                        while(store[item_id] && $(item_id).length > 0){
                            item_id = generate();
                        }                
                        $this.attr("id", item_id);                
                        store[item_id] = {};
                        store[item_id][name] = value;
                    }
                    return $this;
                },

                get: function(){
                    item_id = $this.attr("id");  
                    if(store[item_id] && store[item_id][name]){
                        return store[item_id][name];
                    }
                    else{
                        return null;
                    }
                },

                remove: function(){
                    item_id = $this.attr("id");
                    if(store[item_id]){
                        store[item_id][name] = null;
                    }
                    return $this;
                }
            }

            if(methods[action]){
                return methods[action]();
            } else{
                return alert(store.text.length);
            }
            return $this;
        }
    });     
})(jQuery);

It can be used as follows:

1. store a data value

    $(*selector*).collection("put", *DataName*, *DataValue*); 

2. retreive a data value

    var referencing_variable = $(*selector*).collection("get", *DataName*); 

3. delete a data value

    $(*selector*).collection("remove", *DataName*); 

This is a cross browser solution. Though i have only tested it with Jquery 1.5.1