bootstrap.js 模态按钮在每个先前打开的模态中触发一次单击

Question

我正在尝试使用引导模式打开一个模式窗口来编辑主干模型。一切似乎都很顺利，直到我第二次尝试同样的事情。单击模态按钮后，每个先前打开的模态我都会收到一个事件（之前的模态是否使用关闭/取消按钮关闭无关紧要）。

此行为与此问题中显示的相同：https://github.com/twitter/bootstrap/issues/6828 但我无法将解决方案外推到我的代码中。

这是我第一次使用引导和主干的方法，我想我误解了一些东西。我正在展示一张包含国家/地区的表格。每行都以 2 个按钮（编辑和删除）结束。当您单击其中一个按钮时，（单个）国家/地区视图会捕获事件，将模式包含在 dom 树中并显示它（事件“单击 .editar”）：

    var PaisModelView = Backbone.View.extend({

    tagName: 'tr',
    template: null,
    editarPaisView: null,
    editarPaisTemplate: null,

    // Eventos
    events: {
        'click .editar' : 'editar'
    },

    // Inicializar
    initialize: function(options) {
        this.model = options.model;
        this.template = options.template;
        this.editarPaisTemplate = options.editarPaisTemplate;
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    // Renderizar
    render: function(item) {
        if ($('#editarPais') != null) {
            $('#editarPais').modal('hide');
        }
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

editar: function(item) {
    item.preventDefault();
            // creates the view
    this.editarPaisView = new EditarPaisView({
        editarPaisTemplate : this.editarPaisTemplate, 
        pais : this.model
    });
            // creates the modal window
    $("#body").append(this.editarPaisView.render().el);
            // opens the modal window
    $('#editarPais').modal('show');
},

    close:function () {
        alert('Not implemented');
    }
});

我为国家/地区模型版本表单使用单独的视图：

var EditarPaisView = Backbone.View.extend({
    // Elemento html
    el: $('#mensajes'),
    template: null,
    pais: null,

    // Eventos
    events: {
        'click .confirmarEditar' : 'modificar',
    },


    initialize: function(options) {
        this.template = options.editarPaisTemplate;
        this.pais = options.pais;
    },
    render: function() {
        $(this.el).html(this.template({pais:this.pais}));       
        return this;
    },

    modificar: function(item){
        item.preventDefault();

        var nombrePaisEditado = document.getElementById("nombrePais").value;
        var codigoPaisEditado = document.getElementById("codigoPais").value;
        var valorPaisEditado = document.getElementById("valorPais").value;      

        this.pais.save({
                nombrePais: nombrePaisEditado,
                codigoPais: codigoPaisEditado,
                valorPais: valorPaisEditado
            },{
                success: function(){
                    console.log('Actualizado el país');
                },
                error: function() {
                    alert('Se ha producido un error durante la actualización del país');
                },
                wait: true,
                async: true
            });
    }
});

因此，当您单击模态中的“confirmarEditar”类按钮时，将保存国家/地区模型。

每个视图的 html 代码都在一个单独的模板文件中。这个是针对国家模式的：

<td><%= nombrePais %></td>
<td style="text-align: center;"><%= codigoPais %></td>
<td style="text-align: right;"><%= valorPais %></td>
<td style="text-align: center;">
    <a href="#editarPais" role="button" class="btn btn-mini editar" id="editar_<%=idPais%>"><i class="icon-edit"></i>Editar</a>
</td>
<td style="text-align: center;">
    <a href="#eliminarPais" role="button" class="btn btn-mini eliminar" id="eliminar_<%=idPais%>"
            data-toggle="modal"><i class="icon-trash"></i>Eliminar</a>
</td>

而这个是国模版表格：

<div id="editarPais" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editarPaisLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="eliminarPaisLabel">Editar País</h3>
  </div>
  <div class="modal-body">
    <input type="hidden" id="idPais" value="<%= pais.get('idPais') %>">
    <p>                                 
        Nombre: <input type="text" id="nombrePais" maxlength="64" value="<%= pais.get('nombrePais') %>"/> <br>
        Código: <input type="text" id="codigoPais" maxlength="2" value="<%= pais.get('codigoPais') %>"/> <br>
        Valor:  <input type="text" id="valorPais" value="<%= pais.get('valorPais') %>"/> <br>       
    </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-primary confirmarEditar">Editar</button>
  </div>
</div>

最后，这些是我正在使用的相关库：

<script src="${contextPath}/static/lib/jquery-1.7.1.js"></script>
<script src="${contextPath}/static/lib/underscore.js"></script>
<script src="${contextPath}/static/lib/backbone-0.9.2.js"></script>
<script src="${contextPath}/static/lib/bootstrap.js"></script>

任何帮助将不胜感激！

Answer 1

我认为这可能就像不重新创建模态 div 一样简单。试试这个：

editar: function(item) {
    item.preventDefault();
    // creates the view
    this.editarPaisView = new EditarPaisView({
        editarPaisTemplate : this.editarPaisTemplate, 
        pais : this.model
    });

    // creates or updates the modal window
    if ($('#editarPais').length > 0) {
        $("#editarPais").replaceWith(this.editarPaisView.render().el);
    } else {
        $("#body").append(this.editarPaisView.render().el);
    }

    // opens the modal window
    $('#editarPais').modal('show');
},