苦苦于如何刷新事件监听器？

时间：2015-02-15 23:47:00

标签： javascript jquery dom event-listener

进行了广泛的搜索以找到答案，但却出现了空洞，所以这里有。在下面的JSFiddle中，当你点击＆＃34;洗发水＆＃34;这个词时，你会注意到它出现在我的列表的顶部，因为它的目的。但是当你再次点击它时，它会重新制作动画！我之前了解到这是因为事件监听器是在DOM首次加载时设置的，并且没有刷新。所以，它仍然认为它有一类＆＃34; .done＆＃34;。我无法弄清楚如何解决这个问题！

JSFiddle：http://jsfiddle.net/uq5o5suv/1/

相关的Javascript：

// Handles adding entries back into the list
$(".done p").click(function() {
    $(this).parent().attr("class", "item not-done");
    $(this).parent().hide().prependTo('.list').fadeIn('.5s');
});

3 个答案:

答案 0 :(得分：2)

另一种替代方法是使用.one()（每个事件类型每个元素最多执行一次处理程序），像这样，

$(".done p").one('click', function() {
  $(this).parent().attr("class", "item not-done");
  $(this).parent().hide().prependTo('.list').fadeIn('.5s');
});

答案 1 :(得分：1)

您只需要取消绑定点击处理程序，因此以下内容应该有效：

$(".done p").click(function() {
    $(this).parent().attr("class", "item not-done");
    $(this).parent().hide().prependTo('.list').fadeIn('.5s');
    $(this).unbind('click');
});

答案 2 :(得分：0)

尝试

$(document).ready(function() {
    // Handles new entry submissions
    $('.entry-form').submit(function(event) {
        var entryValue = $(".entry").val();
        // if `entryValue` _not_ have class `not-done` ,
        // prepend `done` having `entryValue` to `.list` ,
        // add class `not-done`
        if (!$(".not-done:contains(" + entryValue + ")").is("*")) {
          var elem = $(".done:contains(" + entryValue + ")");
                    elem.attr("class", "item not-done")
                    .prependTo('.list').fadeIn('.5s');

        } else {
          // else detach `done` class having `entryValue` from `DOM`
          console.log(entryValue + " already listed");
          $(".done:contains(" + entryValue + ")").detach()
        }
        event.preventDefault();
        $('.entry-form')[0].reset();
    });

    // Handles adding entries back into the list
    $(".done p").click(function() {
        $(this).parent().attr("class", "item not-done")
       .hide().prependTo('.list').fadeIn('.5s');
    });
});


$(document).ready(function() {
	// Handles new entry submissions
	$('.entry-form').submit(function(event) {
        var entryValue = $(".entry").val();
        if (!$(".not-done:contains("+entryValue+")").is("*")) {
          var elem = $(".done:contains("+entryValue+")");
                    elem.attr("class", "item not-done")
		    		.prependTo('.list').fadeIn('.5s');

        } else {
          console.log(entryValue + " already listed");
          $(".done:contains("+entryValue+")").detach()
        }
		event.preventDefault();
		$('.entry-form')[0].reset();
	});

	// Handles adding entries back into the list
	$(".done p").click(function() {
		$(this).parent().attr("class", "item not-done")
		.hide().prependTo('.list').fadeIn('.5s');
	});
});
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: "Source Sans Pro";
	font-weight: 300;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {
	background-color: grey;
	background-size: cover;
}

a {
	text-decoration: none;
}

.container {
	margin: 0 20%;
	height: 100%;
}

.header {
	height: 2em;
	background-color: white;
	-webkit-box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
	box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
}

.header h2 {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.main h1 {
	text-align: center;
	margin: 1em 0;
	font-family: "Libre Bakersville";
	font-weight: 700;
	font-size: 2em;
	color: white;
	text-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.entry-form {
	background-color: rgba(0,0,0,0.3);
	height: 2em;
	border-radius: 2em;
	width: 100%;
	-webkit-box-shadow: inset -0px -1px 8px -2px rgba(0,0,0,1);
	-moz-box-shadow: inset -0px -1px 8px -2px rgba(0,0,0,1);
	box-shadow: inset -0px -1px 8px -2px rgba(0,0,0,1);
}

.entry {
	background-color: rgba(0,0,0,0);
	height: 2em;
	width: 80%;
	margin-left: 2em;
	border: none;
	font-size: 1em;
	color: #fff;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.entry::-webkit-input-placeholder {
   color: #fff;
}

.entry:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

.entry::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

.entry:-ms-input-placeholder {  
   color: #fff;  
}

.entry, .submit {
	outline: none;
}

.submit {
	background-color: rgba(0,0,0,0);
	border: 1px solid #fff;
	border-radius: 1em;
	color: #fff;
	font-size: 1em;
	padding: .1em 1em;
	display: block;
	margin-right: 25px;
	float: right;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.submit:hover {
	background-color: #fff;
	color: rgba(0,0,0,.5);
	-webkit-transition: background-color .25s ease, color .1s ease;
    -moz-transition: background-color .25s ease, color .1s ease;
    -o-transition: background-color .25s ease, color .1s ease;
    transition: background-color .25s ease, color .1s ease;
}

.list {
	margin: 2em 20%;
}

.item {
	margin: .33em 0;
	height: 1.75em;
}

.not-done {
/*	background-color: rgba(365,365,365,.8);
*/	border-radius: 2em;
	-webkit-box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
	box-shadow: 0px 1px 2px -1px rgba(0,0,0,.5);
	background-image: -webkit-linear-gradient(top, rgba(365,365,365,.8), rgba(235,235,235,.8));
	background-image: -moz-linear-gradient(top, rgba(365,365,365,.8), rgba(235,235,235,.8));
	background-image: -ms-linear-gradient(top, rgba(365,365,365,.8), rgba(235,235,235,.8));
	background-image: -o-linear-gradient(top, rgba(365,365,365,.8), rgba(235,235,235,.8));
	background-image: linear-gradient(to bottom, rgba(365,365,365,.8), rgba(235,235,235,.8));
}

.checkbox {
	width: .75em;
	height: .75em;
	margin: 0 .75em;
	background-color: rgba(365,365,365,.7);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .2em;
}

.checkbox, .item p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
}

.not-done p {

}

.done .checkbox {
	background-color: initial;
}

.done a {
	color: black;
	text-decoration: line-through;
}

.done a:hover {
	text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>The Fucking Milk</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="js/script.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400|Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
	<div class="header">
		<div class="container">
			<h2>Made by @taykcrane</h2>
		</div>
	</div>
	<div class="main">
		<div class="container">
			<h1>The Fucking Milk</h1>
			<form class="entry-form">
				<input type="text" placeholder="Go ahead. Add a new item to your shopping list here." class="entry">
				<input type="submit" value="Enter" class="submit">
			</form>
			<div class="list">
				<div class="item not-done">
					<div class="checkbox"></div>
					<p><a href="#">almond milk</a></p>
				</div>
				<div class="item not-done">
					<div class="checkbox"></div>
					<p>bananas</p>
				</div>
				<div class="item not-done">
					<div class="checkbox"></div>
					<p>peanut butter</p>
				</div>
				<div class="item not-done">
					<div class="checkbox"></div>
					<p>jelly</p>
				</div>
				<div class="item not-done">
					<div class="checkbox"></div>
					<p>whole wheat bread</p>
				</div>
				<div class="item done">
					<div class="checkbox"></div>
					<p><a href="#">shampoo</a></p>
				</div>
				<div class="item done">
					<div class="checkbox"></div>
					<p><a href="#">comb</a></p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

相关问题
最新问题