Javascript无法在Chrome上执行，但可以在FF和IE上正常运行

Question

I have javascript code to populate tabs on my page and the script works fine on FF and IE. However the script does not execute on Chrome. I am not exactly sure what is wrong with the code that it won't show up on Chrome browser. Chrome debug inspector is not helping me much to find out the issue.

For bet type tabs (link attribute is not clickable and text doesn't show up) HTML

<div id="tabs">
<ul id="betTypesTabs"></ul>
</div>

JS

function drawBetTypesTable(events, eventIndex) {

    // Clean the tabs
    $("#betTypesTabs").html('');

    // The required order: WIN, PLACE, EXACTA, QUINELLA, TRIFECTA, FIRST FOUR, RUNNING DOUBLE
    var orderedBetTypesIds = [1, 2, 105, 107, 106, 111, 108],
        eventId = events[eventIndex].id,
        categoryId = events[eventIndex].categoryId,
        betTypes = events[eventIndex].markets[0].betTypes,
        horseSelections = events[eventIndex].markets[0].selections,
        marketDescription = events[eventIndex].markets[0].marketDescription;

    // If event is the last one, Running Doubles cannot be shown
    if (eventIndex == events.length-1) orderedBetTypesIds.pop();

    $.each(orderedBetTypesIds, function (index, value) {

        var betTypeId = orderedBetTypesIds[index],
            i = null;

        $.each(betTypes, function (betIndex, betTypeValue) {
            if (betTypeValue.id == orderedBetTypesIds[index]) {
                i = betIndex;
                value = betTypeValue;
                return false;
            }
        });

        if (i != null) {

            // Draw the tab
            var a = document.createElement('a');
            a.className = eventId + "_betTypeId_" + betTypeId;
            a.text = value.name;

            var li = document.createElement('li');
            li.appendChild(a);
            document.getElementById("betTypesTabs").appendChild(li);

            // Draw the div with the table
            var div = document.createElement('div');
            div.id = eventId + "_betTypeId_" + betTypeId;

            var table = document.createElement('table');
            table.id = eventId + "_betType_" + betTypeId + "_table";
            table.cellspacing = "0";
            table.cellpadding = "0";
            table.width = "100%";
            table.className = "table_racing";

            document.getElementById("tabs").appendChild(div);
            document.getElementById(eventId + "_betTypeId_" + betTypeId).appendChild(table);

            // Bind click action to the tab link
            var currentA = $("ul#betTypesTabs").find('a[class="' + eventId + '_betTypeId_' + betTypeId + '"]');
            currentA.click(function(){

                // Making the tab active
                $("ul#betTypesTabs li").removeClass("active");
                $(this).parent().addClass("active");

                // Showing the correct div
                $("div#tabs div").hide();
                $("#" + eventId + "_betTypeId_" + betTypeId).show();

                // If it is a Running Double, highlight the next race number
                if (betTypeId == 108) {
                    (function(eventIndex){
                        var nextRaceNumber = events[parseInt(eventIndex)+1].raceNumber;
                        $("#raceNumber_" + nextRaceNumber).removeClass("gray");
                        $("#raceNumber_" + nextRaceNumber).addClass("orange");
                    })(eventIndex);
                }
            });

            var tableId = table.id;

            (function(betTypeId, eventId, categoryId, i, tableId, eventIndex) {
                // PLACE or WIN, WIN/PLACE bet types
                if (betTypeId == 1 || betTypeId == 2 || betTypeId == 3) {
                    drawPlaceBetTypeTable(eventId, categoryId, betTypes[i]);
                    drawSelections(betTypeId, tableId, horseSelections);
                }
                // EXACTA, QUINELLA, TRIFECTA, FIRST FOUR bet types
                else if (betTypeId == 105 || betTypeId == 107 || betTypeId == 106 || betTypeId == 111) {
                    drawExactaBetTypeTable(eventId, categoryId, betTypes[i]);
                    drawSelections(betTypeId, tableId, horseSelections);
                    drawHorseSelectionFooter(betTypeId, tableId);
                }
                // RUNNING DOUBLE
                else if (betTypeId == 108) {
                    drawRunningDoubleBetTypeTable(events, eventIndex, betTypes[i], 6);
                }

                // Append NB description if does not exist
                if (marketDescription != null && $("#" + table.id + '_notabene').length == 0) {
                    appendBetTableFooter(table, marketDescription);
                }
            })(betTypeId, eventId, categoryId, i, tableId, eventIndex);
        }
    });

    // Click on the 1st tab
    $("ul#betTypesTabs a")[0].click();
}

For race type (links are clickable but race type text doesn't show up on chrome) HTML

<div id="raceNumbers" class="racenumbers">
</div>

JS

function drawAllRaceNumbers(events) {

    // Clean parent element
    document.getElementById("raceNumbers").innerHTML = '';

    // Draw a category name, which is same for all events
    var p = document.createElement("p");
    p.innerHTML = events[0].categoryName + ':';
    document.getElementById("raceNumbers").appendChild(p);

    for (var i in events) {
        var a = document.createElement('a'),
            eventNumber = events[i].raceNumber;

        // Racing specials
        if (eventNumber == null) {
            eventNumber = parseInt(i) + 1;
            a.text = eventNumber;
        }
        else a.text = raceAbbr + eventNumber;
        a.id = "raceNumber_" + eventNumber;
        a.className = "gray";
        document.getElementById("raceNumbers").appendChild(a);

        // Binding click event for the race number
        $("#raceNumber_" + eventNumber).unbind();
        (function(i, raceNumber) {
            $("#raceNumber_" + raceNumber).click(function() {
                drawRaceView(events, i);
            });
        })(i, eventNumber);
    }

    var div = document.createElement('div');
    div.className = "clear";
    document.getElementById("raceNumbers").appendChild(div);
}

Edit: Removing the link to my dev environment.

Answer 1

You need to change all your lines which use '.text' to set content of element. This doesn't work on chrome. You could replace it using instead .innerHTML or, as you are already using it, use jQuery for that: $(a).text(data)

Answer 2

You have error : event.returnValue is deprecated. Please use the standard event.preventDefault() instead. event.returnValue is deprecated. Please use the standard event.preventDefault() instead.