javascript - 使用 jquery 生成的标记，链接在 IE 和 Firefox 中不起作用

Question

我正在编写一个 JavaScript 应用程序，它可以动态生成按钮，引导用户访问有关不同产品的链接。

它们看起来像这样:

问题是，当它们生成时，其中包含的链接可以在 Chrome 中工作，但不能在 IE 或 Firefox 中工作。

这是 HTML:

HTML

<div class="row">
    <div class="button-class">
    </div>
</div>

这是我用来生成它们的代码:

JQUERY

buttons: function(num) {
    $(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
    if (state.greens[num].link !== false) {
        $(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].link + " rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
    }

    if (state.greens[num].review !== false) {
        $(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].review + " target='_blank'>Read The Review</a></button></li>");
    }
},

buttons 是名为 display 的对象的一部分，由 display.buttons() 调用；

这两个 if 语句检查产品对象中是否存在某些类型的链接，然后将它们附加到 UL if ydo。

按钮生成正确，但在 Firefox 和 IE 中单击时不会打开链接(也许是 Safari，但我尚未检查)。

让我更困惑的是生成的 html 在语义上看起来是正确的。

例如，这是 Firefox 调试器中显示的不工作的 html:

对我来说没有意义。

如果您想转到该页面的实时版本，您可以在这里看到它:superfood picker

然后转到最后一部分“单击产品的详细信息页面以了解更多信息”，如下所示:

单击其中一款产品，您将转到我正在讨论的按钮。

Answer 1

这在语义上不正确，因为您需要将 href 括在引号中

buttons: function(num) {
    $(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href='" + state.greens[num].website + "' target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
    if (state.greens[num].link !== false) {
        $(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].link + "' rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
    }

    if (state.greens[num].review !== false) {
        $(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].review + "' target='_blank'>Read The Review</a></button></li>");
    }
},

请注意，最好将双引号更改为单引号，反之亦然。