javascript - 加载克隆的模态(引导程序)
问题描述
是否可以使用引导程序加载新克隆的模式?
我需要加载许多不同的模态,但下面是一个尝试仅加载一个新模态的示例。
我已经看到有关在模态中加载克隆元素的问题,但不是完全克隆的模态。
这是一个问题:http: //jsfiddle.net/hde13s2t/6/
脚步:
用户单击“克隆”以克隆模式
Javascript 克隆模态并将适当的标签重命名为“克隆”(按钮和模态标签)
用户单击克隆的模态->“启动演示模态 2”
html 都正确加载,但新模式不会触发。
HTML:
<!-- Button trigger modal -->
<div id="launchmodal1">
<button type="button" class="btn btn-primary" data-toggle="modal" id="examplemodalbutton1" data-target="#exampleModal1">
Launch demo modal 1
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" id="clicktoclone">Clone</button>
Javascript:
$(document).on("click", "#clicktoclone", function() {
var secondmodal = $("#launchmodal1").clone();
// updating button id and data-target for modal 2
secondmodal.find("#examplemodalbutton1").attr("id", "examplemodalbutton2").attr("data-target", "exampleModal2").html("Launch demo modal 2");
// updating modal id for modal 2
secondmodal.find("#exampleModal1").attr("id", "examplemodal2");
secondmodal.appendTo('#launchmodal2');
});
解决方案
jQuery.clone 不会为新的 DOM 元素克隆引导事件。因此,您必须在将新模态附加到 DOM 树后设置模态调用:
$(document).on("click", "#clicktoclone", function() {
var secondmodal = $("#launchmodal1").clone();
// updating button id and data-target for modal 2
secondmodal.find("#examplemodalbutton1").attr("id", "examplemodalbutton2").attr("data-target", "exampleModal2").html("Launch demo modal 2");
// updating modal id for modal 2
secondmodal.find("#exampleModal1").attr("id", "examplemodal2");
secondmodal.appendTo('#launchmodal2');
// set new click event to show the cloned modal
$('#examplemodalbutton2').on('click', function() {
$('#examplemodal2').modal();
})
});
如果您有多个模态克隆,您可以将全局单击事件侦听器绑定到所有模态按钮:
$(document).on('click', '.btn', function() {
var targetSelector = $(this).data('target');
$(targetSelector).modal();
})
推荐阅读
- java - 如何创建一个扩展两个其他接口的接口以在 java 中定义类型
- firebase - 颤振断言错误:颤振:'package:firebase_auth_platform_interface/src/method_channel/method_channel_user_credential.dart':断言失败
- swiftui - SwiftUI 中的 UITabViewController 的 Tab 的 OnAppear 被调用了两次
- javascript - 如何处理来自第三方的未处理拒绝?
- java - 这是 Java 中 Currying 的有效示例吗
- python - Pandas - 根据哪一列不为空,在新列中填充值
- javascript - 使用 HTML、CSS 和 JS 单击一次后的按钮组验证和禁用按钮组
- reactjs - 如何在 React Router 中使用受保护的功能映射路由?
- html - 当我选择其他表单下拉列表时,我想出现一个文本框
- python - Flask-sqlalchemy AttributeError:'function'对象没有属性'query'