[英]How to bind event to element and all children but only ever trigger it once?
[英]How to trigger toggle() only once on all elements?
如何仅触发一次切换?
我有...
<%= f.check_box :push %>
<label for="challenge_push" class="reminder-choices">Push</label>
<%= f.check_box :message %>
<label for="challenge_message" class="reminder-choices">Text</label>
<%= f.check_box :mail %>
<label for="challenge_mail" class="reminder-choices">Email</label>
<script>
$('.reminder-choices').click(function(){
$(".hide-remind").toggle();
});
</script>
我试过了...
# Same behavior as above. Still toggles back and forth.
$('.reminder-choices').one("click", function(){
$(".hide-remind").toggle();
});
换句话说,一旦单击.reminder-choices
,则切换将起作用;否则,如果再次单击,则将不起作用。
您的第二次尝试应该可以。 您也可以这样做。
$('.reminder-choices').on('click.reminder', function() { $(".hide-remind").toggle(); $(this).off('click.reminder'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="reminder-choices">Click Here</div> <div class="hide-remind">Will be toggled</div>
编辑:如果您有多个元素,并且希望在单击其中之一后在所有元素上忽略单击:
$('.reminder-choices').on('click.reminder', function() { $(".hide-remind").toggle(); $('.reminder-choices').off('click.reminder'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="reminder-choices">Click Here</div> <div class="reminder-choices">Or Here</div> <div class="reminder-choices">Or Here</div> <div class="hide-remind">Will be toggled</div>
将代码包装在容器中,然后委派事件。
$('.container').one('click', '.reminder-choices', function() { $(".hide-remind").toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="reminder-choices">Click Here</div> <div class="reminder-choices">Or Here</div> <div class="reminder-choices">Or Here</div> </div> <div class="hide-remind">Will be toggled</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.