按钮在表格行内无法工作

Question

我有一个类似于这样的HTML文档。在这个文档中，行数不确定，可能是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";
    });

- Berkin

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迭代遍历每个带有"class"为"apply"的元素：

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

对于你的#jobId，同样适用于一次只能使用一次，因此你不能在每个循环中使用你的分配。你也可以在for循环中包含一个计数器，将其附加到ids上，这样你最终会得到类似于<button id="apply-1">...的东西。但是，你必须使用选择器来找到每个你拥有的<tr>元素的每个<button>子元素。

- N. M.

---

是的，我现在正在尝试使用类(class)。谢谢，稍等。 - Berkin