ボタンの行の中でボタンが動かない

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を持つ最初の要素を識別し、後で続かない。 、

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

同じことがあなたの#jobIdのために行く：あなたはjQueryのを使用していると仮定して、「適用」

... 
<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> 
... 

そしてクラスですべての要素を反復処理：あなたは、クラスを使用して考えることをお勧めしますこれは複数回使用することはできませんので、各ループで割り当てを使用することはできませんでした。 forループにカウンタを含めることもできます。このカウンタをIDに追加すると、<button id="apply-1">...などのようになります。しかし、あなたが持っている各<tr>要素の各<button>子を見つけるためにセレクタを使用する必要があります。