jQuery：按钮切换未按预期运行

Question

我现在正在学习 jQuery，想知道是否有可能使我的代码工作的方法？当我单击绿色按钮时，它不显示第二个表格行。我能做些什么来避免将来出现这个错误？我愿意接受任何帮助！请，谢谢。

jquery：

$(document).ready(function () {
    $("button").click(function () {
        $(".row2").show();
    });
});

html:

<table>
    <tr class="row1">
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <tr class="row2">
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
        </tr>
</table>
<a class="greenbuttontext" href="#"><button class="showmorebutton">Show9 more concepts</button></a>

css：

/*styles for green showmore button*/
 .showmorebutton {
    height: 33px;
    border: solid #628b06 1px;
    border-radius: 5px;
    width: 200px;
    margin-left: 600px;
    margin-bottom: 25px;
    text-align: center;
    background-color: #99cd00;
    color: white;
    vertical-align: center;
    line-height: 33px;
}

.greenbuttontext {
    text-decoration: none;
}

/*row2 disappear*/
.row2 {
    display:none;
}

Answer 1

您的 html 无效。标签内的按钮

<a class="greenbuttontext" href="#"><button class="showmorebutton">Show
            9 more concepts</button></a>

改成

<a class="greenbuttontext" href="#"></a>
<button class="showmorebutton">Show
            9 more concepts</button>

注意：标签是内联块元素。

Answer 2

不要将<button /> 包装在<a /> 标记中？点击事件可能在锚点而不是按钮上触发。