使用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>");
    }
},

按钮是一个名为display的对象的一部分，由display.buttons（）;

调用

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

按钮生成正确，但在Firefox和IE中点击时他们不会打开链接（也许Safari，但我还没有检查过）。

对我来说更令人困惑的是，生成的html在语义上看起来是正确的。

例如，这是Firefox调试器中显示的html无效：

对我来说没有意义。

如果您想要转到页面的实时版本，可以在此处查看：superfood picker

然后转到最后一部分，其中显示＆＃34;单击产品的详细信息页面以了解更多信息＆＃34;看起来像这样：

点击其中一个产品，它会带你到我正在谈论的按钮。

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>");
    }
},

请注意，如果您更改双引号而不是单引号并且反之亦然，那么它是最好的。