Question

我的页面上有几个div元素，我想要它，这样当你点击一个元素时，它会以模态打开。为了实现这一点，我使用Javascript进行克隆，然后将每个元素追加到bootstrap模式。问题是，每当我尝试将复制的div附加到模态时，使用clone或复制outerHTML，页面都不会加载，我必须强制退出标签

for (var i = 0; i < projects.length; i++) {
var p = projects[i];

// Create modal container
var outerModal = document.createElement('div');
outerModal.id = p.id + "-modal";
outerModal.className += " modal fade";  
outerModal.setAttribute("role", "dialog");

var innerModal = document.createElement('div');
innerModal.className += " modal-dialog";

var p2 = p.cloneNode(true);
innerModal.appendChild(p2);
//console.log(p2);
outerModal.appendChild(innerModal);
document.body.appendChild(outerModal);
p.onclick = function(){$(outerModal).modal("show");};
}

造成这种情况的原因是什么？我认为某些东西占用了太多的记忆或其他东西，但我不知道在哪里。

Answer 1

不要创建多个模态，而是执行此操作：

创建一个模态
在每个div上添加点击事件传入ID。
在点击事件中，运行一个 switch/case就可以了，并根据它填充一个模态点击了div

Answer 2

如果您使用Chrome，可以按Shift + Escape查看内存使用情况。此外，使用console.log来检查它正在做什么可能非常有用。

你能提供演示吗？像jsfiddle或类似的东西。我创建了一个快速测试页面，这似乎正在创建具有适当类的div。

这是一个JSFiddle示例：https://jsfiddle.net/g9m2w98j/

HTML

<div id="outerModal" class="modal fade" role="dialog">
  <div id="innerModal" class="modal-dialog">
    <div id="modalContent" class="modal-content">

    </div>
  </div>
</div>

<div>
  <h2>
    Text Elements
  </h2>
  <input type="text" name="project" value="Test1"> <br>
  <input type="text" name="project" value="Test2"> <br>
  <input type="text" name="project" value="Test3"> <br>
  <input type="text" name="project" value="Test4"> <br>
  <input type="text" name="project" value="Test5"> <br>
</div>

</body>

的JavaScript

$("[name = 'project']").on('click', function(){
    $('#modalContent').empty();
    $('#modalContent').append($(this).clone(true));
  $('#outerModal').modal("show");
});

CSS

.modal-content {
  padding: 15px;
}

追加元素克隆导致页面无法加载

2 个答案: