[英]Click on dynamic children DOMs with condition on parent class
I have .main
that contain a list of dynamic content that can be added on the fly. 我的
.main
包含可以动态添加的动态内容列表。 The .main
can also be disabled with .disable
class. .main
也可以使用.disable
类禁用。 When it's disabled, I don't want all the content items to be clicked. 禁用它时,我不希望所有内容项都被单击。
You can see below that I am using a hack to detect .disable
class after .main
being clicked. 你可以看到下面,我用劈检测
.disable
下课.main
被点击。 Is there a way to structure the CSS selector for jQuery to avoid picking up children DOMs event if parent has certain class? 有没有一种方法可以构造jQuery的CSS选择器,以避免在父类具有特定类的情况下拾取子DOM事件? Maybe some kind of
.main:not(.disable)
but I couldn't figure out how. 也许某种
.main:not(.disable)
但我不知道如何。
Code: http://jsfiddle.net/qhoc/99rjU/ 代码: http : //jsfiddle.net/qhoc/99rjU/
HTML: HTML:
<div class="main">
<div class="state">Enabled</div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<a class="btn" href="#">
Toggle State
</a>
Javascript: Javascript:
$('.btn').on('click', function() {
if ($('.main').hasClass('disable')) {
$('.main').toggleClass('disable');
$('.state').text('Enabled');
} else {
$('.main').toggleClass('disable');
$('.state').text('Disabled');
}
});
$('.main').on('click', ' ul li', function() {
/* This is a hack
if ($('.main').hasClass('disable'))
return;
*/
alert('Item is clicked');
});
I was thinking of other unclean alternatives : 我在想其他不洁的选择 :
Do whole body
click event like this $('body').on('click', '.main:not(.disable) ul li', function()
but this one is very ugly! It has to scan the whole body on each click 做这样的
body
点击事件$('body').on('click', '.main:not(.disable) ul li', function()
但这很丑陋!它必须扫描整个身体每次点击
Unbind li
click event each time a
is trigger to call disable
. 每次触发
a
调用disable
时,取消绑定li
click事件。 But is this an optimal or best practice to do so? 但这是最佳做法还是最佳做法?
UPDATE 1 : 更新1 :
So actually in my project I only want to disable the a
in the list. 所以实际上在我的项目中,我只想禁用列表中的
a
。 Since there are other buttons
and divs
that I still want to trigger event. 由于还有其他
buttons
和divs
,我仍然要触发事件。 However, look like using this won't work 但是,使用此功能似乎无效
.disable li a
{
pointer-events: none;
}
Here is the link for this http://jsfiddle.net/qhoc/99rjU/2/ 这是此http://jsfiddle.net/qhoc/99rjU/2/的链接
Look like this is still experimental and won't work on anchor tag?? 看起来这仍处于实验阶段,无法在锚标记上使用??
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
Well you could disable all click event's on the div when it has the class .disable
with css: 好吧,当它具有使用CSS的类
.disable
时,您可以在div上禁用所有click事件:
.disable
{
pointer-events: none;
}
This way nothing inside the div is clickable. 这样,div内的所有内容均不可点击。
For IE it is somehow harder, as IE 10 and below doesn't support pointer-events
. 对于IE来说,要困难一些,因为IE 10及以下版本不支持
pointer-events
。 However a great article has been written on how to bypass this with a layer function: http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 但是,关于如何使用层函数绕过它的文章很不错: http : //www.vinylfox.com/forwarding-mouse-events-through-layers/
I hope this is what you mean. 我希望这就是你的意思。
$('.btn').on('click', function() {
var main = $('.main');
$('.state').text(main.hasClass('disable') ? 'Enabled' : 'Disabled');
main.toggleClass('disable');
});
$('.main').on('click', 'li', function(e) {
if ($(this).parents('.main.disable').length) {
// actually this is similar to your alternative#1
return;
}
alert('Item is clicked');
});
What about this? 那这个呢?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.