Here’s an annoying one for you. It would appear that the world of cross-browser development has ventured into the dangerous and shark filled waters of grammar. More specifically; capitalisation.

I discovered this when working with some JSON fuelled JQuery table manipulation. Essentially the JSON was loading some raw data from a database and then appending it to a table. This table was a typical CRUD affair, with data on the left and edit/delete buttons on the right. To give you an idea of this here is an example snippet of code:

jQuery("#table").find('tbody')
    .append(jQuery( '<tr>' )
        .append(jQuery('<td>').attr('class', 'tdDelete')
            .append(jQuery('<a>').attr('href', 'javascript: void(0)').attr('onclick', 'editItem("' + row.id + '");') )
        )
    );

As you can see the jQuery is traversing the table and adding a row and an element, in this case the edit button. Which does not have a href but should fire the onclick event to call the editItem() function. Now this worked fine in Mozilla Firefox but not in Google Chrome, or Apple Safari. Much headscratching ensued! Until i discovered that Chrome and Safari are sticklers for grammar; in that the C in onclick has to be capitalised for the event to fire! I know its like being in a school english lesson. So the amended code would be:

jQuery("#table").find('tbody')
    .append(jQuery( '<tr>' )
        .append(jQuery('<td>').attr('class', 'tdDelete')
            .append(jQuery('<a>').attr('href', 'javascript: void(0)').attr('onClick', 'editItem("' + row.id + '");') )
        )
    );

I won’t be making this mistake again!