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

当您需要追加元素时，请确保始终使用jQuery对象（而不是字符串）：

$(modal).modal('show');

否则新元素不会附加到您认为附加它们的元素上：）

当你执行setTimeout时 - 它确实显示了，但点击（在该模态之外）导致它立即关闭。我们可以使用show：

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

async

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

为什么单击Modal内的按钮不能打开另一个模态？

1 个答案: