x-editable 不适用于 django 中的 bootstrap 3答案

【问题标题】：x-editable not working with bootstrap 3 in djangox-editable 不适用于 django 中的 bootstrap 3
【发布时间】：2016-10-21 15:51:28
【问题描述】：

我正在尝试将 x-editable 库集成到我的 Web 应用程序中，以便我可以在我的页面上创建可编辑的元素

我已按照X-editable 的official link 中的步骤进行操作

（只是frontEnd 部分）

这是我模板中的代码：

{% block extra_stylesheets %}
    <link href="{% static "data_management/plugins/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet" />

<link href="{% static 'data_management/plugins/DataTables/media/css/dataTables.bootstrap.min.css' %}"
  rel="stylesheet"/>
<link href="{% static 'data_management/plugins/DataTables/extensions/Responsive/css/responsive.bootstrap.min.css' %}"
  rel="stylesheet"/>

<link href="{% static 'data_management/plugins/bootstrap-editable/css/bootstrap-editable.css' %}" rel="stylesheet">

{% endblock %}
{% block extra_head_javascript %}
    <script src="{% static "data_management/plugins/jquery/jquery-1.9.1.min.js" %}"></script>

<script src="{% static 'data_management/plugins/bootstrap/js/bootstrap.min.js' %}"></script>

<script src="{% static 'data_management/plugins/bootstrap-editable/js/bootstrap-editable.min.js' %}"></script>


{% endblock%}

{% block content %}
<table class="table table-stripped">
                                        <tr>
                                            <th class="text-center">Visit Identifier</th>
                                            <th class="text-center">Visit Date<br/>
                                                <small style="font-weight: normal;">(Click to change the date)
                                                </small>
                                            </th>
 </tr>
                                        {% for course in course.books_set.all %}
                                            <tr>
                                                <td class="text-center">{{ course.name }}</td>
                                                <td class="text-center"><a href="#" id="pub_date" data-type="combodate"
                                                           data-value="1984-05-15" data-format="YYYY-MM-DD"
                                                           data-viewformat="DD/MM/YYYY"
                                                           data-template="D / MMM / YYYY" data-pk="1"
                                                           data-title="Select published Date "
                                                           class="editable editable-click editable-open"
                                                           data-original-title="" title=""
                                                           style="background-color: rgba(0, 0, 0, 0);">12/12/2012</a>
                                </td>

</tr>
                                        {% endfor %}
                                    </table>

{% endblock %}

我已将此脚本集成到模板的页脚中：

 <script>
    $(document).ready(function() {
$('#pub_date').editable();
});
</script>

但我不知道为什么这不起作用？非常感谢任何帮助

编辑

我注意到问题可能是由于 id 重复，因为我有一个 for loop 并且 id 必须是唯一的！

我怎样才能避免这种情况？

有没有办法创建一个类并按类调用所有元素？我不太擅长css 和html。

提前致谢

【问题讨论】：

标签： css django twitter-bootstrap-3 x-editable

【解决方案1】：

我已经解决了这个问题：

将x-editable的版本改为1.5适配bootstrap 3
去掉id="pub_date"，用data-name="pub_date"切换

并把这个脚本：

 <script>

  $.fn.editable.defaults.mode = 'popup';

$(document).ready(function() {
    $('[data-name=pub_date]').editable();
});
</script>

希望对其他人有所帮助。

【讨论】：