我在理解 jQuery (v1.11) 的事件以及 DOM 交互如何影响这些事件方面遇到了一些困难。
设置:
我创建了一个带有“字母”类的内联 block 网格并观察点击:
$('.letter).on('click',function(){ // do something })
当我点击其中一个时，它会扩展到其父容器的大小。
问题:
即使我删除了类“letter”，div 仍然响应点击事件。理想情况下，我想展开 div 以显示更多信息，然后在用户完成后让它收缩回原位。
这是我的 html， fiddle 在底部。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.square {
font-size: 20px;
color: white;
padding: 5px;
display: inline-block;
background-color: #69f;
height: 50px;
width: 50px;
vertical-align: top;
}
.grid {
width: 390px;
padding: 5px;
}
.row { padding-top: 5px; }
.square.empty { background-color: #87afff; }
.square-highlight { background-color: #36f; }
</style>
</head>
<body>
<!-- begin content -->
<div class="grid">
<div class="rows">
<div class="row">
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square letter">a</div>
</div>
<div class="row">
<div class="square letter">b</div>
<div class="square letter">c</div>
<div class="square letter">d</div>
<div class="square letter">e</div>
<div class="square letter">f</div>
<div class="square letter">g</div>
<div class="square letter">h</div>
</div>
<div class="row">
<div class="square letter">i</div>
<div class="square letter">j</div>
<div class="square letter">k</div>
<div class="square letter">l</div>
<div class="square letter">m</div>
<div class="square letter">n</div>
<div class="square letter">o</div>
</div>
<div class="row">
<div class="square letter">p</div>
<div class="square letter">q</div>
<div class="square letter">r</div>
<div class="square letter">s</div>
<div class="square letter">t</div>
<div class="square letter">u</div>
<div class="square letter">v</div>
</div>
<div class="row">
<div class="square letter">w</div>
<div class="square letter">x</div>
<div class="square letter">y</div>
<div class="square letter">z</div>
<div class="square empty"></div>
<div class="square empty"></div>
<div class="square empty"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.letter').hover(function(){
$(this).addClass('square-highlight');
},function(){
$(this).removeClass('square-highlight');
});
$(".letter").not('.large').on('click',function(){
$(this)
.addClass('large')
.css('position','absolute')
.stop()
.animate({
height: $('.rows').height()-5,
width: $('.rows').width(),
top: $('.rows').position().top+5,
left: $('.rows').position().left
},"fast")
.append('<input type="button" name="Save" value="save" />');
});
$(".large").on('click',function(){
alert('test');
});
});
</script>
</html>
这是我的 fiddle :http://jsfiddle.net/aKpLQ/
最佳答案
点击事件在 $(document).ready 期间使用选择器和当时元素的状态绑定(bind)到元素。更改元素的类不会更改绑定(bind)到它的事件。
要更改事件，您必须取消绑定(bind)单击事件并将其与新事件绑定(bind)。或者，您可以将相同的事件处理函数与一个条件函数一起使用，该函数的行为会根据元素的当前状态而有所不同。像这样的东西:
$(".letter").on('click',function(){
if($(this).hasClass('large')){
alert('test');
$(this).removeClass('large');
} else
$(this)
.addClass('large')
.css('position','absolute')
.stop()
.animate({
height: $('.rows').height()-5,
width: $('.rows').width(),
top: $('.rows').position().top+5,
left: $('.rows').position().left
},"fast")
.append('<input type="button" name="Save" value="save" />');
});
关于javascript - 修改 DOM 时 jQuery onclick 事件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21866219/