Jquery class removed after link click, but second click is still recognized - javascript

I'm having a little problem. I'm trying to use Jquery load() function to load in stuff on a page using AJAX. After the content has been loaded, and the link gets tapped on a second time, I need to loaded content to slideup/hide; And when the same link is clicked for the 3+ time, I need to just toggle the loaded content display, since it's already been loaded once.
My problem is that after clicking the link once, I remove the loadable class, but on the second click the same function executes as if the class were still there. Here is my HTML:
<a title="Food" id="food" class="loadable" href="get-taste/food">Food</a>
<div class="food_load_space"></div>
The link triggers the load and the data loads into .food_load_space. And here's my JS:
$(document).ready(function(){
$('a.loadable').click(function(){ //executed upon link click 1;
url = $(this).attr('href');
linkid = $(this).attr('id');
toload = url + ' #content-area';
//now, remove loadable, add loaded and expanded
$(this).removeClass('loadable');
alert(toload);
$('.' + linkid + '_load_space').load(toload);
return false;
}); //kill loadable
I'm also planning on adding an .expanded class and a .loaded class so that the script knows at which state the link is in. But what happens is this function fires even if the .loadable class is gone.

The event has already been bound to the element, you need to manually unbind the event from the element(s) in question. This can be done by calling $(this).unbind('click');.
You may also wish to check if the element has the class in the event function.

The handler is bound the the element, not the selector.
If you only want it to exist for one click, use the one()(docs) method to bind it.
$('a.loadable').one('click', function(){
// and so on...
It will be automatically unbound after the first click.

The reason your second click is recognized is because jQuery has already binded an action to your element. You can't unbind the event just by removing the class. The class was only there to help you select that element (and style your element).
To remove the event binding, in your click function, you should do something like:
$('a.loadable').click(function() {
...your other code...
$(this).unbind('click');
});

Related

anchor tag onlick event called automatically in jquery

I have question regarding this jquery code block. What I am doing is, onclick on anchor tag, I am creating a anchor tag element and appending it to 'currentFilters' div element.
While debugging through firebug, I can see that anchor element is getting added to the div, then jquery automatically calls onclick again so my anchor tag gets created twice.
Not sure how onclick event is triggered again automatically.
Also, on page load, this functionality works as expected.. But then I am doing ajax call to the server and creates more elements in the same page. then it doesnot work,,
$(document).ready(function() {
$(".matchTypeCheckbox").click(function() {
var parent = "parent_" + $(this).attr('id');
$('#' + parent).removeClass("").addClass("active");
var newElement =
"<a tagid='"+ $(this).attr('id')
+ "' tagtype='mt' href='#' class='rTag'><span class='rTag'>X</span>"
+ $(this).text();
+"</a>";
$('.currentFilters').append(newElement);
});
});
it works fine on page load, only doesnt work after ajax call
and
But then I am doing ajax call to the server and creates more elements in the same page. then it does not work
When you call
$(".class").click(function() ...
it binds that anonymous/inline function to all elements with class "class" (in this example) - that exist at the time the click() is called.
This is why we use $(function() { (or $(document).ready, same thing), so that the click event is wired up after the DOM elements have been created and they already exist (to have the event attached).
If you then create new elements
$('.currentFilters').append(newElement);
the previous call on document ready has already been called so is not applied to the new elements.
There are two ways around this:
After calling append, also attach the click event handler (this works best with a separate function rather than anon/inline), something like (untested, ottomh) :
$(function() {
$(".class").click(clickHandler);
});
$('.currentFilters').append(newElement);
newElement.click(clickHandler)
or using event delegation, something like:
$(function() {
$(document).on("click", ".class", clickHandler);
});

How to get Id of hyperlink on click which was appended using jquery

I am appendend a hyperlink to the html page using append() method, It is a list of hyperlinks, and I get all other elements id by this.id, but am not able for the appended row, why this happening? is there any other way to append ??
thanks in advance
It sounds like somewhere in your code you have this:
$("selector for links").on("click", function() {
// Using this.id here
return false; // Since they're links I assume you do this or e.preventDefault();
});
and after that code runs, you add another link, but clicking it doesn't trigger the handler above. That's because the code above hooks the event on the elements that exist as of when it runs; since the link you add didn't exist, its click event didn't get hooked.
You can use event delegation to solve this, by changing the code above to:
$("selector for container").on("click", "selector for links", function() {
// Using this.id here
return false;
});
That hooks click on a container that holds the links, but fires the handler as though the event had been hooked on individual links. So since the event is hooked on the container, you get the event even when you add new links.
Concrete example:
$(document).on("click", "a", function() {
alert(this.id);
return false;
});

calling js function works only for the first time on jquery mobile

on jquery mobile web app I'm calling js function on close button. That js function close it's callers div parent.
That works fine, but problem is that I have multiple close buttons and this function works perfectly first time,
after that onclick doesnt work. It doesnt enter into js function.
I tried to put js function at very bottom of my _Layout.cshtml page but it doesnt change anything.
update
<script type="text/javascript">
$('#closeTable').click(function () {
$(this).parent().hide();
});
</script>
<div id="closeTable"></div>
Your problem is originating from the fact that you're using an ID to add event listeners to. In your JS, you have this line:
$('#closeTable').click(function () { ...
This line attaches a click event handler to the div with ID closeTable. Since there can only be one element with this ID, once it's hidden the user can't click it again and so the function won't be executed again.
If you have multiple close buttons as you say, you should instead use a class selector to attach handlers:
$(".closeTable").click(function() { ...
This will instead attach a listener to every element with class closeTable. This means that when any of them are clicked the function will execute, so it will work multiple times.
Hope this helps.

JQuery - .click triggering when clicked anywhere should: upon clicking on a link

https://dl.dropboxusercontent.com/u/63617776/Capture.PNG
So as on the image, when you click on the map, a div is changed. Now when I click on a link in the div, I want the google maps div to change to another map.
But, the code I wrote either doesn't trigger at all or it triggers when I click anywhere on the page.
$('#nowydwor').ready(function(){
$(this).click(function(){
alert('foo');
});
});
Ofcourse the link looks like this:
{a id="nowydwor"} text {/a} (for some reason i couldn't enter < so I replaced it with {)
This triggers when user clicks anywhere on the page, for some reason. Also this is only a testcode for now, it is meant to display the alert. :) Any ideas?
EDIT: The link is contained in .html(), in a switch() statement.
case '#mazowieckie':
$('#info').html("CONTENT </h5><hr><strong><a id='nowydwor'>Skład Nowy Dwór Mazowiecki</a></strong> CONTENT");
break;
Calling ready only makes sense if you call it on the document/window to get notified as soon as the DOM is ready.
Try to bind the click handler on your DOM element directly:
$('#nowydwor').on('click', function(){
alert('foo');
});
I think what you were trying to do, is assign the click handler after the content of #info has changed. Unfortunately .ready() is only an event handler for the document ready event. It only fires once. Also changing the html of '#info' isn't triggering any events (IMHO).
You can work around this, using the .on-method on a parent element. Consider this html structure:
<div id="info">
<!-- This content is dynamically loaded -->
<a id="nowydwor">Click this to change map</a>
<!-- End of dynamic content -->
</div>
This makes it possible to call:
$('#info').on('click', '#nowydwor', function(){ /* Change map here... */ })
This assigns the event handler to #info, which is only called if the clicked element matches '#nowydwor'. Since '#info' is never removed, only the content changes, you don't have to apply it again.
The only point is, you have to determine what the id of the map/place is, because the event handler will be the same for all links.

jQuery .not() isn't filtering elements from function - Ideas?

I'm trying to create a function that disables voting button after an Ajax POST success. The voting buttons are enabled until POST completes, and then are fixed with 'disabled' styling and are in-clickable. I'm trying to use jQuery .not() to disable starting the function from clicked buttons (with the class 'disabled') but I'm not having much luck. Here's a fiddle of my function so you can see my problem, I'm not sure what I'm missing but I'm hoping someone can help me find my error, it's frustrating me : )
jQuery Code:
$("a.votebutton").not(".disabled").each(function(index) {
var el = $(this);
$(this).click(function() {
el.addClass("active disabled").unbind("click");
el.siblings().addClass("disabled");
});
});
​
The problem is that your code:
$("a.votebutton").not(".disabled")
selects all of the links that are not disabled at the time that line of code runs, and then you loop through assigning click handlers. These click handlers remain bound to those links even if they happen to be given the "disabled" class at a later time - so when you add the "disabled" class to the clicked element's siblings those siblings still have a working click handler. If you unbind the click from the siblings that should fix it:
// change
el.siblings().addClass("disabled");
// to be
el.siblings().addClass("disabled").unbind("click");
Note that you don't need the .each():
$("a.votebutton").not(".disabled").click(function() {
$(this).addClass("active disabled").unbind("click")
.siblings().addClass("disabled").unbind("click");
});
Another way to do it would be to use delegated event handling:
$("div.panel").on("click", "a.votebutton:not(.disabled)", function() {
$(this).addClass("active disabled")
.siblings().addClass("disabled");
});
That way the clicks are only handled once they bubble up to the containing div ("div.panel"), at which time your click handler is only run if the event's source element matches the selector that is the second parameter to .on().
Updated demo: http://jsfiddle.net/RSezp/2/

Categories

Resources