मैं HTML मंदिर में मान सेट करने के लिए गो मंदिर का उपयोग कर रहा हूं लेकिन यहां। मैं लूप का उपयोग करके कई <button id="exec" cid="{{.Id}}">Show</button> बना रहा हूं लेकिन केवल पहला बटन क्लिक फ़ंक्शन काम कर रहा है, यह काम नहीं कर रहा है। केवल पहले बटन के लिए अजाक्स कॉल हुआ।

  <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>
1
Kmarlon Pereira 18 अप्रैल 2020, 18:50

1 उत्तर

सबसे बढ़िया उत्तर

Html दस्तावेज़ में तत्वों की id संपत्ति अद्वितीय होनी चाहिए, और आप $("#exec") का उपयोग करके तत्व का चयन करते हैं, आप उस आईडी के साथ केवल पहला तत्व चुनते हैं।
आप कक्षा चयनकर्ताओं के पास जा सकते हैं, या एकाधिक आईडी का उपयोग कर सकते हैं और अन्य चयनकर्ता द्वारा चयन कर सकते हैं:

<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 प्रोप को बदलने का कोई तरीका नहीं है तो आप कुछ अन्य वर्ग जोड़ सकते हैं और कुछ अन्य चयनकर्ताओं का उपयोग कर सकते हैं। उदाहरण के लिए - आप तालिका में आईडी जोड़ सकते हैं, और फिर उस विशिष्ट तालिका के सभी बटनों का चयन कर सकते हैं:

<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() {
    ....
});
1
Dekel 18 अप्रैल 2020, 16:26