Question

我正在使用go Templete在HTML Templete中设置值，但是在这里。我正在使用循环创建许多<button id="exec" cid="{{.Id}}">Show</button>，但是只有第一个按钮单击功能可以正常工作，其他则无法正常工作。仅发生了第一个按钮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>

Answer 1

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全部按钮不起作用，只有一个按钮起作用

1 个答案: