jquery - Bootstrap 模式使用 jQuery Tablesorter 选择错误的项目

Question

当我触发此 Bootstrap 模式时，它会选择表中最上面的条目作为 e.entry，而不是行上的条目。如果我对列进行排序，模式将再次选择最上面的条目。

对于可能出现的问题有什么想法吗？

谢谢!

                <script >
                $(document).ready(function(){
                   $("#EntryTable").tablesorter(
                    {sortList: [[1,0]]}
                    );
                 });
            </script>
            <table class="table" id="EntryTable">
                <thead>
                    <tr>                                
                        <th>Idea</th>
                        <th>Edit</th>
                    </tr>
                </thead>
                <tbody>


            {% for e in projects.entries.all %}
            <tr class="info">
                <td>{{ e.entry }}</td>
                <td><a href="#EditModal" role="button" data-toggle="modal" class="open-EditEntryDialog label label-info" data-id="{{ e.entry }}">Edit</a>

                    <div class="modal hide fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="EditModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="EditModalLabel">Edit an Entry</h3>
                      </div>
                      <div class="modal-body">
                            <form action="{{ projects.get_absolute_url }}" method="post">
                            {% csrf_token %}
                            <input type='hidden' name='entry_id' value='{{ e.id }}'>
                            <input type='hidden' name='project_id' value='{{ projects.id }}'>
                            <input type='text' id='entry' name="entry" placeholder="{{ e.entry }}"> 

                        </div>

                      <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        <button type='submit' name="edit_entry" value='Edit Entry' class="btn btn-primary">Edit Entry</button>
                        </form>
                      </div>
                    </div>
                </td>
                </tr>
            {% endfor %}

Answer 1

这是一个工作的 fork fiddle :

http://jsfiddle.net/technotarek/9KsxW/4/

重要提示:您的模式停止工作的原因是因为您 (1) 加载了错误版本的 jQuery，并且 (2) DOM 中有多个具有完全相同 ID 的元素(例如，#EditModal)。 ID 应该是唯一的。当多个元素具有相同的 ID 时，模态插件不知道要与哪些元素交互。出于 fiddle 的目的，我只是将 ID 设置为 #EditModal、#EditModal2 和 #EditModal3。显然，您需要使用服务器端代码动态地执行此操作。

在相关说明中，我还删除了您的一些 JavaScript。我不确定您到底想通过以下内容实现什么目的:

$(document).on("click", ".open-EditEntryDialog", function() {
    var EntryId = $(this).data('id');
    console.log($(this));
    $(".modal-body #entry").val(EntryId);
    $('#EditModal').modal('show');
});​

...但它使模态行为不当。它启动了所有三种模式，而不仅仅是选定的一种。同样，这可能是因为您对 ID 和类的使用松散 - 也就是说，您没有使用正确的选择器来选择准确/正确的元素。

无论如何，您都会看到 fiddle 现在排序并启动正确的模式(我更改了每个模式的标题以帮助确认这一事实)。