[英]How to bind after unbind in jQuery?
I need help with binding back after I unbind an element. 在取消绑定元素后,我需要有关绑定的帮助。 Basically, I have three anchor elements, and I want to achieve this: 基本上,我有三个锚元素,我想实现这个目标:
When one of them is clicked, the other two can't be clicked. 单击其中一个时,无法单击其他两个。 Then when the user clicks the close button, I want to bind back the click event for all three links. 然后,当用户单击关闭按钮时,我想绑定所有三个链接的click事件。
To unbind is not a problem, but the binding back is not working. 取消绑定不是问题,但绑定后退不起作用。 I didn't post any code because I think that the solution provided will work in general, not just in my case. 我没有发布任何代码,因为我认为提供的解决方案一般都有效,而不仅仅是在我的情况下。
Is there maybe any other way to achieve what I want, but not with the use of bind/unbind or on/off? 有没有其他方法可以实现我想要的,但不是使用bind / unbind或on / off?
Edit: 编辑:
Here is how i have done it.The animated div is called miniContainer.This is the sample for one anchor, but it is the same thing for all three. 这就是我如何做到的。动画div被称为miniContainer。这是一个锚的样本,但对于这三个锚都是一样的。
//First Link
krug1Link.click(function(element){
if(miniContainer.hasClass('animirano')){
return false;
};
element.preventDefault();
miniContainer.stop().animate({ height:360 },{duration:500,easing: 'easeOutBack'});
miniTekst1.animate({opacity:'1'},1200);
polaroidMali.animate({opacity:'1'},1200);
miniContainer.addClass('animirano');
});
//Close Mini Container
close.click(function(element){
miniTekst1.animate({opacity:'0'},1200);
miniTekst2.animate({opacity:'0'},1200);
polaroidMali.animate({opacity:'0'},1200);
polaroidMali2.animate({opacity:'0'},1200);
miniContainer.animate({marginTop: 10, height:1},{duration:600,easing: 'easeInBack'});
miniContainer.removeClass('animirano');
});
Don't bind
and unbind
to do this. 不要bind
和unbind
。
Choose a common ancestor, and use jQuery's selector based event delegation. 选择一个共同的祖先,并使用基于jQuery的基于选择器的事件委托。
var clickables = $('.clickable');
$('#some_ancestor').delegate( '.clickable', 'click', function() {
// to disable the others
clickables.not( this ).removeClass('clickable');
});
Then to reenable them all, just add the class back in. 然后重新启用它们,只需将类添加回来。
clickables.addClass( 'clickable' );
If you're using jQuery 1.7 or later, then use .on()
instead since it has event delegation built in. 如果您使用的是jQuery 1.7或更高版本,那么请使用.on()
因为它内置了事件委托。
$('#some_ancestor').on( 'click', '.clickable', function() {
// to disable the others
clickables.not( this ).removeClass('clickable');
});
Here's one of the solutions from the comments below. 以下是以下评论中的解决方案之一。
demo: http://jsfiddle.net/c9Ydy/3/ 演示: http : //jsfiddle.net/c9Ydy/3/
<ul id="container">
<li id="link1" class="box clickable">
<a href="#">LINK ONE</a>
</li>
<li id="link2" class="box clickable">
<a href="#">LINK TWO</a>
</li>
<li id="link3" class="box clickable">
<a href="#">LINK THREE</a>
</li>
</ul>
<div id="content_display">
<button>CLOSE</button>
<p id="link1_content">THIS IS THE CONTENT FOR THE FIRST LINK.</p>
<p id="link2_content">THIS ONE IS FOR THE SECOND LINK</p>
<p id="link3_content">AND THIS IS THE THIRD LINK</p>
</div>
js JS
var clickables = $('.clickable'),
display = $('#content_display'),
$content, // remember the one that was clicked
display_animation_enabled = false;
$('#container').delegate( '.clickable', 'click', function() {
display_animation_enabled = true;
clickables.removeClass('clickable');
if( $content ) { $content.hide(); }
$content = $('#' + this.id + '_content').show();
cycle();
});
display.find('p').hide();
display.find('button').click(function() {
display_animation_enabled = false;
clickables.addClass( 'clickable' );
if( $content ) { $content.hide(); }
});
function cycle() {
if( display_animation_enabled ) {
display.animate({width:300,height:300})
.animate({width:200,height:200}, cycle);
}
}
css CSS
div.box {
width: 50px;
height: 50px;
background: yellow;
margin: 10px;
}
div.clickable {
background: orange;
}
#content_display {
width: 200px;
height: 200px;
background: yellow;
}
#content_display > p {
margin: 10px;
color: blue;
}
Doesn't seem like you would need to unbind/re-bind to achieve the desired result. 似乎您不需要解除绑定/重新绑定以获得所需的结果。 Just use a flag. 只需使用一面旗帜。 ie 即
//This is a variable that you will use to check whether any of the anchors have been
//clicked. If this flag is set to true, then the click handler below will not
//perform any action when the other anchors are clicked. When this flag is set to false
//the click handler will take the desired action. From your description it sounds like
//the action might be opening a window of some sort...
var buttonClicked = false;
//Bind a click handler to each anchor
$('#anchor-1').click(function(){
//check to see if one of the anchors has already been clicked. If none have been
//clicked take execute the code inside the if statement.
if(!buttonClicked){
//set the flag to true, indicating that one of the anchors has been clicked.
buttonClicked = true;
//Here you would open your window or popup...
//i.e. popup.open();
}
});
$('#anchor-2').click(function(){
if(!buttonClicked){
//logic for second anchor..
}
});
//Bind a click handler to the close button you mentioned
$('.close-button').click(function(){
//Close the window or popup here...
//i.e. popup.close();
//set the flag to false, which will allow all of the anchors to be clicked.
buttonClicked = false;
});
If your close button is generated dynamically you will need to use live, delegate, or on, rather than the shorthand click function... 如果您的关闭按钮是动态生成的,则需要使用live,delegate或on,而不是速记点击功能......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.