【问题标题】:Javascript does not execute on Chrome but works fine on FF and IEJavascript 无法在 Chrome 上执行,但在 FF 和 IE 上运行良好
【发布时间】:2014-02-28 09:45:32
【问题描述】:

我有 javascript 代码来填充页面上的选项卡,并且该脚本在 FF 和 IE 上运行良好。但是该脚本不会在 Chrome 上执行。我不确定它不会显示在 Chrome 浏览器上的代码有什么问题。 Chrome 调试检查器对我找出问题没有多大帮助。

对于投注类型选项卡(链接属性不可点击且文本不显示) 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();
}

对于比赛类型(链接是可点击的,但比赛类型文本不会显示在 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);
}

编辑:删除指向我的开发环境的链接。

【问题讨论】:

  • 不确定,很难发现,但请尝试代替:a.text = eventNumber; 使用 $(a).text(eventNumber);
  • 您能否指定 events 变量包含的内容以及如何创建/获取它?
  • 我会删除匿名函数,将它们移出函数和 for 循环。您也可能对此有疑问:(function(){...}(params...)) 而不是 (function(){..})(params..)
  • @A.沃尔夫它不起作用
  • @Nish 但是你必须在你的代码中替换你所有的a.text ......我认为这很明显。顺便说一句,如果包含 jQuery,请使用它。不要混淆 js/jQuery 语法。您可以考虑代码一致性。编辑:如果仍然不起作用,请在您的问题中突出显示代码中的哪一行没有按预期工作。当您应该能够为我们发现它时,必须检查所有代码以发现它,这很无聊

标签: javascript jquery google-chrome firefox


【解决方案1】:

您需要更改所有使用“.text”设置元素内容的行。这不适用于铬。您可以使用 .innerHTML 替换它,或者,如果您已经在使用它,请使用 jQuery:$(a).text(data)

【讨论】:

  • .textContent 似乎比.innerHTML 更合适(IE9+)
  • @Saebekassebil 是的,但正如你所指出的,IE8 不支持
  • @A.Wolff 然后你可以使用 $(a)​​.html() 我猜。 jQuery 将确保它按预期工作,如果您使用 jQuery 1.x,在 IE8 中也是如此
  • @KoalaBear 当然可以,但由于 OP 只是设置文本字符串,为什么不使用 .text()
  • 当然。这是对 textContent / innerHTML 部分的反应
【解决方案2】:

你有错误:event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

【讨论】:

  • 这只是一个警告。并且已经在 jQuery 1.11 中“修复”了。这不是问题的原因。
  • 谢谢,我知道这一点。但这与 Chrome JS 的问题无关。
猜你喜欢
  • 1970-01-01
  • 2018-02-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多