模态中的javascript

时间:2017-01-07 16:23:47

标签: javascript bootstrap-modal dropzone.js

我正在尝试为自己编写一些原型,我想将模态的代码动态加载到div上或按钮点击后,在我完成此操作后,显示的模态但无法激活其中的javascript,任何人都可以搞清楚刚刚发生了什么?
(单页工作正常,它只发生在我试图动态加载这些代码时) (在Firefox上测试)

的index.html

<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
		<script src="http://www.w3schools.com/lib/w3data.js"></script>
		<script src="js/import.js"></script>

	</head>

	<body>

		<div class="container">
			<div class="row text-center">
				<h3>Basic Drag and Drop</h3>
				<button data-toggle="modal" data-target="#basicDropzone" class="btn btn-lg btn-primary" 
				url="view/Dropzone.html">Click to Open Dropzone</button>
			</div>

			<div id="Modal"></div>
		</div>
	</body>
</html>

import.js

var import_list = [ 
	"https://rawgit.com/enyo/dropzone/master/dist/dropzone.js",
	"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
	"js/modal.js"
]

for (url of import_list) {
	var js = document.createElement("script");
	js.src = url;
	document.head.appendChild(js);

}



var import_list2 = [
	"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
	"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal.css",
	"https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css",
	"https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css"
]

for (url of import_list2) {
	var ln 	= document.createElement("link");
	ln.href = url;
	ln.rel	="stylesheet";
	document.head.appendChild(ln);
}

Dropzone.html

<div class="modal fade" id="basicDropzone" tabindex="-1" role="dialog" aria-labelledby="basicDropzone" aria-hidden="false">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
				<h4>Basic Dropzone</h4>
			</div>
			<div class="modal-body">
				<form action="/upload-target" class="dropzone"  >
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default">Save Changes</button>
			</div>
		</div>
	</div>
</div>

这个import.js用于在首次加载时将不同的lib加载到页面中 之后,如果用户点击按钮,modal.html加载到#Modal div,并显示模态,模态中出现一个dropzone,但似乎没有发生在我身上。

请随时询问有关代码的问题。

0 个答案:

没有答案