Button不能在表格行中工作

Question

我有一个像这样的HTML。在这个HTML中，tr的数量并不确定。它可以是1或1000.每行有一个按钮有一个名称，“应用”。我有一个jQuery来处理点击操作，但在这种情况下，jQuery只识别第一行的按钮。但我不知道该怎么做。

<tr id="jobs" th:each="job : ${job}"> 

        <p id="jobID" th:text="${job.jobId}" style="display: none"></p> 
        <div class="col-md-3" id="JobTitle"> 
         <span class="label label-default">Job Title</span> 
         <td th:text="${job.jobTitle}" /> 
        </div> 

        <div class="col-md-3" id="jobDescription"> 
         <span class="label label-primary">Job Description</span> 
         <td th:text="${job.jobDescription}" /> 
        </div> 

        <div class="col-md-3" id="numberOfPersonToHire"> 
         <span class="label label-success">Number Of Candidates</span> 
         <td th:text="${job.numberOfPersonToHire}" /> 
        </div> 

        <div class="col-md-2" id="lastApplicationDate"> 
         <span class="label label-info">Last Date</span> 
         <td th:text="${job.lastApplicationDate}" /> 
        </div> 

        <button id="apply" type="submit" class="btn btn-xs"aria-label="Left Align"> 
         <img th:src="@{/images/apply.png}" height="20" width="auto" /> 
         Apply 
        </button> 
       </tr> 

JS

$("#apply").click(function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     debugger   
     var jobId = $('#jobID').text(); 
     document.location.href = "/admin"; 
    }); 

Answer 1

的ID（使用＃声明）是不能被使用一次以上一个独特元件。 JavaScript标识具有该特定ID的第一个元素，并且之后不会继续。你可能要考虑使用一个类：

... 
<button class="apply" type="submit" class="btn btn-xs"aria-label="Left Align"> 
    <img th:src="@{/images/apply.png}" height="20" width="auto" /> 
    Apply 
</button> 
... 

，随后通过类“应用”的每一个元素迭代，假设你使用JQuery：

$('.apply').each(function() { 
    ... 
}); 

同样的事情会为您#jobId，不能多次使用，所以你不能在每个循环中使用你的赋值。你也可以在你的for循环中加入一个计数器，你可以将这个计数器添加到ID中，这样你最终会得到类似<button id="apply-1">...或类似的东西。但是，您必须使用选择器来查找每个<tr>元素的每个<button>子元素。