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」的所有項目，儘管您應該添加另一個選擇器，您可以使用屬性選擇器。

你的例子：（只有1項工程）

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/

或既然你知道有一個tr的父母，你可以在id之前添加tr到選擇器，它會檢查每個tr並找到id爲confirm的第一個元素。

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