JS模态不适用于每一行

Question

我真的不明白，为什么我的javascript不能处理每个表行。

表代码：

<table class="table">
  <tr>
    {# sorting of properties based on query components #}
    <th{% if pagination.isSorted( 'a.tytul') %} class="sorted" {% endif %}>{{ knp_pagination_sortable(pagination, 'Tytuł', 'a.tytul') }}</th>
      <th>{{ knp_pagination_sortable(pagination, 'Kategoria', 'a.kategoria') }}</th>
      <th>{{ knp_pagination_sortable(pagination, 'Cena ^', 'a.cena', {'direction': 'asc'})}}{{ knp_pagination_sortable(pagination, 'v', 'a.cena', {'direction': 'desc'})}}</th>
  </tr>
  {# table body #} {% for oferta in pagination %}
  <tr {% if loop.index is odd %}class="color" {% endif %}>
    <td><a href="{{ path('_oferta', {'idOferty' : oferta.idOferty}) }}"> {{ oferta.tytul }}</a>
    </td>
    <td>{{ oferta.kategoria }}</td>
    <td>{{ oferta.cena }}zł/miesiąc</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Opcje <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Zmień</a>
          </li>
          <li class="divider"></li>
          <li><a href="#" id="confirm"><span class="glyphicon glyphicon-trash"></span> Usuń</a>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  {% endfor %}
</table>
{# display navigation #}
<div class="navigation col-sm-offset-11">
  {{ knp_pagination_render(pagination) }}
</div>

和javascript：

<script>
    $(document).ready(function(){
        $("#confirm").click(function(){
            $("#myModal").modal();
        });
    });
</script>

我缺少什么？

Answer 1

当您按ID引用项目时，您将只返回第一个匹配的对象。

如果您希望以id为"confirm"的所有项目为目标，尽管您可能应该添加另一个选择器，但您可以使用属性选择器。

您的示例：（只有第一项有效）

https://jsfiddle.net/SeanWessell/y7cg56bj/

$(document).ready(function(){
    $("[id='confirm']").click(function(){
        $("#myModal").modal();
    });
});

属性选择器示例：

https://jsfiddle.net/SeanWessell/k8uqvd16/

https://api.jquery.com/attribute-equals-selector/

OR因为您知道tr有一个父元素，所以您可以将tr添加到id之前的选择器中，它会检查每个tr并找到id为confirm的第一个元素。

$("tr #confirm").click(function(){
  $("#myModal").modal();
});