jQuery创建动态事件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery创建动态事件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery创建动态事件</title>
<link href="css/main.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<script type="text/javascript" src="js/zzsc_jquery.js"></script>
</head>

<body>

<div class="wrapper">
	<div class="main">
		<form class="generate" method="post">
			<h1 class="generate-title">Event handler generator</h1>
			<input type="text" class="generate-input" placeholder="Type something">
			<input type="submit" class="generate-submit" value="Create new item">
		</form>
		<ul id="links">
			<li class="dynamic-link">List item 1</li>
			<li class="dynamic-link">List item 2</li>
			<li class="dynamic-link">List item 3</li>
			<li class="dynamic-link">List item 4</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="js/zzsc_jquery.js"></script>
</body>
</html>

JS代码(zzsc_jquery.js):

(function(){
	// querySelector,jQuery stylevar $ = function (selector){
	return document.querySelector(selector);
}
;
	// Create function outside loopfunction dynamicEvent(){
	this.innerHTML = 'Dynamic event success.';
	this.className += ' dynamic-success';
}
// Iterate over #links <li>// Use querySelector to target #links and then get tag names <li>var links = $('#links').getElementsByTagName('li');
	// For each <li> inside #linksfor (var i = 0;
	i < links.length;
	i++){
	var link = links[i];
	// <li> onclick,runAlert functionlink.onclick = dynamicEvent;
}
// Onsubmit$('.generate').onsubmit = function(){
	// Grab the input valuevar dynamicValue = $('.generate-input').value;
	// If empty valueif(!dynamicValue){
	alert('Please enter something.');
}
else{
	// Change the submit value$('.generate-submit').value = 'Click your item below!';
	// Create the links with the input value as innerHTMLvar li = document.createElement('li');
	li.className = 'dynamic-link';
	li.innerHTML = dynamicValue;
	// Append it and attach the event (via onclick)$('#links').appendChild(li);
	li.onclick = dynamicEvent;
}
// Prevent the form submittingreturn false;
}
}
)();

CSS代码(demo.css):

/*Todd Motto LabsURL:www.toddmotto.com*/
/*------------------------------------*\ JS Event Handlers\*------------------------------------*/
body{background:#34495E;color:#FFF;font-weight:900;font-size:15px;}
.main{margin:0 auto;max-width:400px;}
/* Links */
#links{list-style:none;}
.dynamic-link{cursor:pointer;background:#1ABC9C;padding:15px;margin:5px 0;border-radius:5px;}
.dynamic-success{background:#16A085 url(../img/success.svg) no-repeat 98% center;}
/* Generation form */
.generate{background:#ECEFF1;padding:25px;margin:25px 0;border-radius:5px;}
.generate-title{text-align:center;color:#34495E;font-size:22px;}
.generate-input,.generate-submit{text-align:center;font-size:16px;border:0;border-radius:5px;padding:15px 15px;margin:15px 0 0;width:100%;}
.generate-input{background:#FFF;color:#34495E;outline:0;border:2px solid #FFF;}
.generate-input:focus{border-color:#1ABC9C;}
.generate-submit{cursor:pointer;color:#FFF;background:#1ABC9C;}

CSS代码(main.css):

/*Todd Motto LabsURL:www.toddmotto.com*/
/*------------------------------------*\ RESET\*------------------------------------*/
*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font:400 13px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#333;}
/*------------------------------------*\ STRUCTURE\*------------------------------------*/
.wrapper{max-width:1280px;margin:0 auto;}
.header{padding:15px 25px;margin:0 0 20px;background:#FFF;border-left:5px solid #2BA6CB;overflow:hidden;}
.logo{float:left;}
.nav{float:right;margin:12px 0;list-style:none;}
.nav-link{}
.nav-link a{color:#2BA6CB;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)