I have 2 flag image links, German and English. When the user clicks German flag I want to disable onclick for German. And if user clicks English, then I want to re-enable onclick for German again.
I'm using this, but it's not working:
jQuery(document).ready(function() {
$('a#German').click(function() {
$(this).removeAttr('onclick').unbind('click');
});
$('a#English').click(function() {
$('a#German').attr('onclick').bind('click');
});
});
Instead of switching all those handlers and driving yourself nuts I'd try this approach:
<a href="#lang-1" class="language-choice language-choice-selected" data-lang="lang-1">Lang 1</a>
<a href="#lang-2" class="language-choice" data-lang="lang-2">Lang 2</a>
<a href="#lang-3" class="language-choice" data-lang="lang-3">Lang 3</a>
Then, in my Javascript, I'd do:
var $languageChoices = $('.language-choice');
$languageChoices.on('click', function(){
var $link = $(this);
if( ! $link.is('.language-choice-selected')){
var language = $link.data('lang');
$languageChoices.removeClass('language-choice-selected');
$link.addClass('language-choice-selected');
switchLanguageTo(language); // I guess?
}
});
This way you just don't do anything if you select the current language.
Just to simplify farmerjoe's a bit, you can delegate the click event to the first common parent of the flag buttons, and use a class to toggle their active staus, like so:
var buttons = $("#german, #english");
var parent = $("#parent"); // or whatever the common parent is
parent.on("click", "#german, #english", function() {
buttons.toggleClass("active");
}
parent.on("click", "#german.active", german_handler );
parent.on("click", "#english.active", english_handler );
Note that you'll need to start one of the buttons with the active class.
You need to make the handler known, something like this:
The way this works is, the window is loaded and the command jQuery(document).ready(function() {//code}) then calls the function that is given as its argument. That function when run, will find the elements, in this case your english and german buttons, and give them some protocol for when a click event takes place. This is what the bind("event",my_named_handler) function does. The arguments are the "event" which describes the type of event you are waiting for, and the handler is a function which will handle the event. If you assign this as bind("click",function(){//code}) the function remains anonymous and cannot be referenced. When you call unbind("click",my_named_handler) your code will look for handlers that have been linked to your element and remove them. If you have gone about the way of using an anonymous function then you will not be able to reference by any easy method. By defining your handler in a variable you can pass the same handler to both bind and undbind, making the link and unlink take place as the function knows exactly what handler you are referencing in both cases.
The bind("event",handler) is a function which links an element to a listener for an event, and
var german_handler = function() {
// do german clicky stuff
};
var english_handler = function() {
// do english clicky stuff
};
jQuery(document).ready(function() {
$('#German').bind("click",german_handler);
$('#German').bind("click",function() {
$('#German').unbind("click",german_handler);
});
$('#English').bind("click",english_handler);
$('#English').bind("click",function() {
$('#German').bind("click",german_handler);
});
});
Also, it is better to use #German instead of a#German, id tags should usually be unique.
jquery(document).ready(function(). Why do I do clicky stuff in outside functions?
jquery(document).ready() is code that executes when the docuement has loaded, $('#id').bind() then defines certain behavior to bind to elements, you set up listeners for these events with behavior for when they are heard.var german_handler at very top of your example? $('#German').unbind("click");. That is the action I want to take when German is clicked. Is that right?handler which you would like to unbind. The bind() function links a function to an event, so the purpose of the unbind() call is to disestablish this linkage. This is why it needs the format ("#id").bind("event",handler) and then ("#id").unbind("event",handler), they need to reference the same function.
#Germaninstead ofa#Germanbindcall is missing the second argument, the event handler function. Also, you should useonandoff, asbindandunbindare obsolete.aelement seems like it wouldn't work