Bootstrap Modal 觸發事件顯示兩次

Question

我正在創建一個 Web 門戶並嘗試創建一個模態，當模態打開時我需要調用一個服務。 但是模態沒有打開，有一段時間它兩次觸發表演事件

https://jsfiddle.net/tiwariliferocks/gcoxuf6c/

  $(document).ready(function() {
    ConsultarEmpleador.initialise();
});

var ConsultarEmpleador = (function() {
    var init = function() {
        ConsultarDeuda.initialise();
        ConsultarDemanda.initialise();
    }
    return {
        initialise: init
    }
})();


var ConsultarDeuda = (function() {
    var ConsultaDeudaGrid, gridConsultaDeuda;

    var detalleAfiliadoDeuda = function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert("hii");
        var popup = PRIMAUtil.popup({ backdrop: 'static', keyboard: false }, '#detallePorAfiliadoDeuda');

    };

    var init = function() {

        $("#open").on("click", detalleAfiliadoDeuda);
        $("#detallePorAfiliadoDeuda").on('show.bs.modal', function() {
            console.log("open");
            $(this).off('shown.bs.modal');
        });
        $("#detallePorAfiliadoDeuda").on('hide.bs.modal', function() {
            console.log("close");
        });
    }

    return {
        initialise: init,
        verEmpleadorDeuda: verEmpleadorDeuda
    }
})();

var ConsultarDemanda = (function() {

    var init = function() {};
    var verEmpleador = function() {};

    return {
        initialise: init,
        verEmpleador: verEmpleador
    }
})();
var PRIMAUtil ={};
PRIMAUtil.popup = function(container, config) {
      container = container.jquery ? container : $(container);

      var cfg = {
        backdrop:'static',
        keyboard: false
      };



      $.extend(cfg, config);
      container.modal(cfg);     

      var dialog = container.modal('show');
      return dialog;
    };

Answer 1

它不起作用，因為您的代碼中有錯誤。 verEmpleadorDeuda: verEmpleadorDeuda未在第 41 行中定義，在ConsultarDeuda內部，您正在使用錯誤的參數順序調用PRIMAUtil.popup() ，應該是PRIMAUtil.popup(container, config)你有PRIMAUtil.popup(config, container)

我只是在這里解決了這些問題。

 $(document).ready(function() { ConsultarEmpleador.initialise(); }); var ConsultarEmpleador = (function() { var init = function() { ConsultarDeuda.initialise(); ConsultarDemanda.initialise(); } return { initialise: init } })(); var ConsultarDeuda = (function() { var ConsultaDeudaGrid, gridConsultaDeuda; var detalleAfiliadoDeuda = function(e) { e.preventDefault(); e.stopPropagation(); alert("hii"); var popup = PRIMAUtil.popup('#detallePorAfiliadoDeuda',{ backdrop: 'static', keyboard: false }); }; var init = function() { $("#open").on("click", detalleAfiliadoDeuda); $("#detallePorAfiliadoDeuda").on('show.bs.modal', function() { console.log("open"); $(this).off('shown.bs.modal'); }); $("#detallePorAfiliadoDeuda").on('hide.bs.modal', function() { console.log("close"); }); } return { initialise: init, } })(); var ConsultarDemanda = (function() { var init = function() {}; var verEmpleador = function() {}; return { initialise: init, verEmpleador: verEmpleador } })(); var PRIMAUtil ={}; PRIMAUtil.popup = function(container, config) { container = container.jquery ? container : $(container); var cfg = { backdrop:'static', keyboard: false }; $.extend(cfg, config); container.modal(cfg); var dialog = container.modal('show'); console.log(dialog); return dialog; };

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Modal</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Modal --> <div class="modal fade" id="detallePorAfiliadoDeuda" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>This is a large modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <button id="open" class="btn btn-sm btn-grey "> OPEN </button> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>

Answer 2

問題是您對PRIMAUtil.popup()初始化。

它應該是這樣的：

var popup = PRIMAUtil.popup('#detallePorAfiliadoDeuda', {
  backdrop: 'static',
  keyboard: false
});

Bootstrap Modal 觸發事件顯示兩次

問題描述

2 個解決方案

解決方案1
0 2017-02-08 22:19:49

解決方案2
0 2017-02-08 22:20:15

JSFIDDLE

Bootstrap Modal 觸發事件顯示兩次

問題描述

2 個解決方案

解決方案1 0 2017-02-08 22:19:49

解決方案2 0 2017-02-08 22:20:15

JSFIDDLE

解決方案1
0 2017-02-08 22:19:49

解決方案2
0 2017-02-08 22:20:15