首页 > Golang > Go问答

HTML 所有按钮都不起作用，只有一个按钮起作用

来源：stackoverflow

时间：2024-04-08 16:24:30 461浏览收藏

在Golang实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML 所有按钮都不起作用，只有一个按钮起作用》，聊聊，希望可以帮助到正在努力赚钱的你。

问题内容

我正在使用 go templatete 在 html templatete 中设置值，但是在这里。我正在使用循环创建许多但只有第一个按钮单击功能正常工作，其他功能不起作用。仅第一个按钮发生了 ajax 调用。

<body >
    <div style="width: 100%;">
    <div style="height:700px;overflow:auto;float:left;width: 50%">
    <table>
        <tr>
          <th>Country Name</th>
          <th>View</th>
        </tr>
        {{ range .CountryData }}
                <tr>
                      <td>{{ .Name }}</td>
                      <td><button id="exec" cid="{{.Id}}">Show</button></td>
                </tr>
        {{ end }} 
    </table>
    </div>
    <div id="response" style="height:700px;overflow:auto;float:left;width: 50%"></div>
</div>
  </body>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#exec").on("click", function() {
                var urlData = "/country?cid=" + $(this).attr("cid");
                $.ajax({
                    url: urlData,
                    method: "GET",
                    success: function(data) {
                        $("#response").html(data);
                    },
                });
            });
        });
    </script>

解决方案

html 文档中元素的 id 属性应该是唯一的，并且您使用 $("#exec") 选择元素，您仅选择具有该 id 的第一个元素。
您可以移至类选择器，或使用多个 id 并通过其他选择器进行选择：

<body >
    <div style="width: 100%;">
    <div style="height:700px;overflow:auto;float:left;width: 50%">
    <table>
        <tr>
          <th>country name</th>
          <th>view</th>
        </tr>
        {{ range .countrydata }}
                <tr>
                      <td>{{ .name }}</td>
                      <td><button class="exec" cid="{{.id}}">show</button></td>
                </tr>
        {{ end }} 
    </table>
    </div>
    <div id="response" style="height:700px;overflow:auto;float:left;width: 50%"></div>
</div>
  </body>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button.exec").on("click", function() {
                var urldata = "/country?cid=" + $(this).attr("cid");
                $.ajax({
                    url: urldata,
                    method: "get",
                    success: function(data) {
                        $("#response").html(data);
                    },
                });
            });
        });
    </script>

如果无法更改 id 属性，您可以添加一些其他类并使用其他一些选择器。例如 - 您可以将 id 添加到表中，然后选择该特定表内的所有按钮：

<table id="table-with-buttons">
    ...
    {{ range .countrydata }}
            <tr>
                  <td>{{ .name }}</td>
                  <td><button id="exec" cid="{{.id}}">show</button></td>
            </tr>
    {{ end }} 
</table>

在代码中，您可以使用以下方法选择所有按钮：

$("#table-with-buttons button").on("click", function() {
    ....
});

终于介绍完啦！小伙伴们，这篇关于《HTML 所有按钮都不起作用，只有一个按钮起作用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布Golang相关知识，快来关注吧！

声明：本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除