带有 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 语句检查产品对象中是否存在某些类型的链接，如果是 ydo，则将它们附加到 UL。

按钮生成正确，但在 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>");
    }
},

请注意，最好更改双引号而不是单引号，反之亦然。