javascript - 为什么点击模态框内的按钮不会打开另一个模态框？

Question

我们有一个 modal在其中嵌套一个按钮。单击我们尝试(在运行时生成并)打开另一个模式，如下所示:

  var createPrintableTable = function(divToAppendTo, newTableId) {
    $("#printer").remove();
    var tbl = $("<table style='display:block;' border='1'/>").attr("id", newTableId);
    var modal = $("<div id='printModal' class='modal' role='dialog' />");
    var modalDialog = "<div class='modal-dialog' />";
    var modalContent = "<div class='modal-content' />";
    var modalBody = "<div class='modal-body' />";
    $(modalBody).html('test modal body');
    $("#" + divToAppendTo).append(modal);
    $(modal).append(modalDialog);
    $(modalDialog).append(modalContent);
    $(modalContent).append(modalBody);
    $(modalBody).append(tbl);
    $(".modal-body").append("<button id='printer' data-toggle='modal' data-target='#printModal' style='float: right; top: -33px; right:40px; position: relative;border: none; font-size: 20px; color: #7f7f7f; background-color: #f8f8f8;'> <i class='fa fa-print' aria-hidden='true'></i> </button>");

    $("#printer").click(function() {
      debugger;
      $("#" + newTableId).css('display', 'block');
      $(modal).modal('show');
    });
  }

  createPrintableTable("myModal", "myModalTable");

它不会在控制台上抛出任何错误，但也不会打开另一个模式。我们哪里错了？

The fiddle

Answer 1

1. 确保在需要附加元素时始终使用 jQuery 对象(而不是字符串):

var modal = $("<div id='printModal' class='modal' role='dialog' />");
var modalDialog = $("<div class='modal-dialog' />");
var modalContent = $("<div class='modal-content' />");
var modalBody = $("<div class='modal-body' />");

否则新元素不会附加到您认为附加了它们的元素上:)

1. 当您执行 $(modal).modal('show'); - 它确实显示了，但是点击(在该模式之外)导致它立即关闭。 我们可以使用 show 上的 setTimeout 来解决这个问题:

setTimeout(function() {
    $(modal).modal('show');
}, 0)

这是最终版本:
https://jsfiddle.net/atggf59p/