Question

我在页面代码中有这个html部分：

          </tr>
      {% for sens in sensors %}
      <td>
        <div class="sens_id">
          {{ sens.id }}
        </div></td>
      <td>
        <div class="sens_edit">
          <a href="/networks/{{ net.id }}/sensors/edit?id={{ sens.id }}"><i class="icon-pencil"></i></a>
        </div></td>
      <td>
        <div class="modal hide" id="myModal">
          <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Are you sure you want delete " {{ sens.name }} " ?</h3>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="/networks/{{ net.id }}/sensors/delete?id={{ sens.id }}" class="btn btn-primary">Delete</a>
          </div>
        </div>


        <a data-toggle="modal" href="#myModal"><i class="icon-trash"></i></a>
    </div></td>

此代码，对于我网络中的每个传感器，都会创建一个包含传感器名称的表格，链接到编辑页面和垃圾桶图标以删除传感器。

但是这个链接

<a href="/networks/{{ net.id }}/sensors/delete?id={{ sens.id }}" class="btn btn-primary">Delete</a>

总是删除列表的第一个传感器，就像sens.id总是一样。如果传感器是ex。 200，与垃圾桶图标相关联的模态插件总是删除列表顶部的传感器。

这是twitter bootstrap的错误吗？我该如何解决这个问题？

非常感谢。

Answer 1

id在您的文档中是唯一的，因此通过为所有不同的模式对话框重复相同的ID，无法区分单击垃圾桶图标时打开的那个。

每个模态对话框都需要一个唯一的ID。

<div class="modal hide" id="myModal_{{ sense.id }}">

和

<a data-toggle="modal" href="#myModal_{{ sense.id }}"><i class="icon-trash"></i></a>

Twitter引导程序错误？我的Modal插件无法正常工作

1 个答案: