jQuery删除父类与其单击方法发生冲突
jQuery删除父类与其单击方法发生冲突
提问于 2014-10-18 17:30:32
我的javascript代码有一些问题:这里有一个html：
<div class="panel02">
<div href="#" class="settings">
<span><i class="q-my-account"></i> Change Settings</span>
<div class="form">
<a href="#" class="closeMenu">X</a>
<h3>Change City/State</h3>
<select name="compassToolsClockTo">
<option>First Option</option>
<option>Another Option</option>
<option>Another Option</option>
<option>Another Option</option>
</select>
<a href="#" class="submit" id="clocksSubmit">SUBMIT <i class="q-next"></i></a>
</div>
</div>
<div class="time">
<div class="clocks" id="clock1">
<i></i>
<canvas id="clockFrom"></canvas>
<strong><span class="q-address"></span></strong>
</div>
<div class="clocks" id="clock2">
<i></i>
<canvas id="clockTo"></canvas>
<strong><span class="q-address"></span></strong>
</div>
</div>
</div>为了解释一下，它看起来是这样的：
然后，当您单击div.settings上的任何地方时，它会添加“编辑”类，使其看起来像这样(不用担心它看起来坏了，样式还没有完成)：
一切正常工作，除了我点击小的"X“链接，它应该删除编辑类，隐藏表单，并再次显示时钟。这是我的JS代码：
//settings
jQuery('.settings').click(function(e) {
if(!jQuery(this).hasClass('edit')) {
jQuery(this).addClass('edit');
}
});
//remove edit
jQuery('.close').click(function(e) {
e.preventDefault();
jQuery(this).parent().parent().removeClass('edit');
});现在，这显然是矛盾的，当我单击“关闭”按钮时，它还会触发.settings事件，添加我刚刚删除的类。
有更好的方法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-18 17:33:09
使用event.stopPropagation()阻止DOM树上的事件冒泡。
此外，在HTML标记中，元素具有类closeMenu，而不是close。
jQuery('.closeMenu').click(function(e) {
e.stopPropagation();
e.preventDefault();
jQuery(this).parent().parent().removeClass('edit');
});事件冒泡的More info。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26442596
复制相关文章
相似问题
腾讯云开发者
