Bootstrap Modal 触发事件显示两次答案

【问题标题】：Bootstrap Modal firing event show twiceBootstrap Modal 触发事件显示两次
【发布时间】：2017-02-09 06:20:15
【问题描述】：

我正在创建一个门户网站并尝试创建一个模式，当模式打开时我需要调用一个服务。但是模式没有打开，有时它会触发两次显示事件

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;
    };

【问题讨论】：

您在控制台中有错误。
不，我没有任何错误
Uncaught Error: Bootstrap's JavaScript requires jQuery 这是您的 JSFiddle 中的第一个错误。您必须重新排列加载的脚本，首先是 jQuery，然后是 Bootstrap JS 文件。第二个错误是 verEmpleadorDeuda 未定义，您尝试将其返回。
更新了链接jsfiddle.net/tiwariliferocks/gcoxuf6c/3
另一个错误：Uncaught ReferenceError: verEmpleadorDeuda is not defined

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

问题是你对PRIMAUtil.popup()的初始化。

它应该看起来像这样：

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

JSFIDDLE

【讨论】：