Re-bind a jquery on click after I have ajaxed the page - javascript

So I have three images that when you click on them brings up a larger image. A really basic gallery I made. Any way when im changing content on the page with the .load(), it doesnt register the click any more for the div.
How to I reload the jquery or reload the event handlers?
Here is what I was trying
function recheckTheImageClickers(){
$('#img1').on('click', function(){
change1();
});
});
I tried to run this function after the ajax to see if it would re-bing the $img1 to a click function but no luck.
Any ideas?

I worked it out, I wasn't running the function in the success part of .load(). It works now.

This looks like a perfect spot for jQuery's live or delegate (both now deprecated in favor of using on with more parameters):
$(parentSelector).on('click', '#img1', function(){ change1(); });
As long as your parentSelector is outside of the AJAX refreshed DOM elements, and #img1 is a child of said parent, this should work without needing to re-execute it.

Related

toggleClass not working when coming from an AJAX request

I have a webpage with a link to make an AJAX request. When the following .js comes back the toggleClass function does not work.
$(document).ready(function(){
$("td").click(function(){
$(this).toggleClass("br");
});
});
If I replace toggleClass("br") with something like addClass("br") then that does work.
Furthermore, toggleClass works fine if I put the .js into the html page or if I run it from the console. It seems that something about both toggleClass and AJAX requests together stops this code from working but I have no Earthly idea as to why that might be.
UPDATE
I've figured out the problem. I had accidentally included jQuery two times and so javascript from AJAX requests was being run twice. Hence why only toggleClass was "not working" while addClass and removeClass were.
The only mystery left is why this was only the case when the .js came from an AJAX request as opposed to when it was in the HTML itself.
Assuming you want the click handler to be on an element that is populated by the AJAX query, you have to late bind the event to a DOM element that exists before the AJAX query fires. Let's say you have the following HTML:
<html>
<body>
<table id="populatedByAjax"></table>
</body>
</html>
...and you know you're going to populate the table via AJAX. Then we need to declare our jQuery selector like this:
$("#populatedByAjax").on("click", "td", function(){
$(this).toggleClass("br");
});
That makes sure that the click event is bound to any current or future td elements in the selector #populatedByAjax
Use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.
$(document).on('click', '#td', function() {
$(this).toggleClass("br");
});

call on .load in not working properly

I have a page xyz.jsp which having a script on page load and its working fine.
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
but if i am calling this page on abc.jsp on jquery .load page is rendering but
$("#hiddenLoginButton").click(); is not working.
dont know the reason why its not coming.
please tell me that its working onload of xyz.jsp but if i calling that page on abc.jsp it not working
Adding code which is in abc.jsp:
function newstyle(){
$("#test").load("xyz.jsp");
};
so, newstyle calling onload on abc.HTML rendering fine but
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
which is in xyz.jsp not working fine if i am calling that on abc.jsp..i hope its clear now.
.load() is an ajax request so if you are loading elements from other page then direct binding of events to the element won't work. So workaround to this is event delegation which you have to delegate the event to the existing parent item which is loading the html from other page.
$(document).find('#hiddenLoginButton').click();
You can delegate it to the closest parent which was available at the time of page load:
$('#ID or .Class of the parent item').find('#hiddenLoginButton').click();
like:
$('#wrapper').find('#hiddenLoginButton').click();
side note:
if you are able to post some rendered html then that would be much better to see what is going on and what will be suggested to overcome this.
Try with .trigger like
$("#hiddenLoginButton").trigger('click');
and we assumed that you have called the function loginRegOverlay() on page load
AND I have noticed that you wrote code in xyz.jsp and you want to trigger it on abc.jsp then include that xyz.jsp at abc.jsp
inlcude('xyz.jsp');
and plz makesure that those buttons ids are unique bec xyz is loads on abc and due to duplicate in ids they wont work,you can give them same class and fire it as once
You can use .live or .on method for event delegation
$("#hiddenLoginButton").live('click', function(){});

Click Event Not Working After Ajax Content Added

Basically, I have a page which on page loading fetches Ajax content. The lightbox (which is unrelated to the ajax content) has Event.observe click events that stop working when the ajax products are loaded. I can get this to work with jQuery's .live method but am not familiar with Prototype.
SAMPLE NOT WORKING CLICK EVENT:
Event.observe('closeLink', 'click', function () {
RunSomeFuntion.close();
ClearAll();
});
How do I get the events (see above) to remain functional using Prototype, even if Ajax content is added on page load.
Event delegation is the solution. Use on. See http://prototypejs.org/learn/event-delegation.
$('ancestorID').on('click', '.closeLink', function(event, element) {
var clickedLink = event.element;
RunSomeFuntion.close();
ClearAll();
});
Basically you need to re-execute your event bindings. Prototype doesn't not have anything similar to .live, unfortunately.

jQuery document.ready fired but elements aren't found

I have a problem that happens only on a specific computer(FFX 3.6.13,Windows 7,jQuery 1.4.3).
Sometimes document.ready is fired but when trying to get elements to attach the event handlers,the elements don't exist!
the code goes something like this:
$(function(){
window.initStart = true;
$("#id_of_element").click(function()...);
window.initEnd = $("#id_of_element");
});
the window.initStart/End are there for debugging,sometimes this code runs just fine,but sometimes window.initEnd is just a empty jQuery set(length == 0).
What this means is that document.ready is always fired,but sometimes it is fired before elements are available.
Does anybody had this problem? what could the problem be?
One way that you could try to get around this would be with using .live instead of .click. The following code
$('#idOfDiv').live('click', function() { doStuff(); });
will attach the input function to the click event of everything that is dropped on the page with an id of 'idOfDiv' as soon as it makes it to the page. Whereas .click executes immediately, this should be attached no matter what time the divs make it to the page.
Cheers
There's an article on SitePoint that demonstrates how to sense when certain dom elements are available.
Also I know this is a version specific issue, but if you were on Jquery 1.5 the deferred objects stuff would be useful here.

jQuery scripts no longer run on partially refreshed elements

I have a number of jQuery scripts that select elements within the area that I run a partial page refresh on.
I am using this css tricks code snippet to refresh that part of the page:
$('#refreshbutton').click(function() {
var url = "http://myUrl.com/indexTest.php?ID=" + Math.random();
setTimeout(function() {
$("#maindisplay").load(url+" #maindisplay>*","");
}, 100);
});
The problem is that the elements within #maindisplay are changed, thus are considered new elements in the dom. Since the scripts that select those elements and attach functions to them run at domready and not during the partial refresh, this poses a problem.
So far I have been unable to find a way to reattach the scripts to the elements within #maindisplay after I partially refresh it.
My question is: What is the optimal way to reattach the scripts to the refreshed area of the page.
Thank you for any advice.
You need to use the live() function to attach your click handler.
You have the following options that I can think of:
Put the attach in a function and call that function on page refresh
Use the .live() functionality
Use .delegate() functionality
Put the Javascript reference to the functionality in a reference in the refresh so that it executes as a part of that refresh
Put the function in the callback
make it part of your setTimeout
some other creative method I did not think of...
Just a note: I would look at the .delegate() with contextual selection added in recent versions (available in 1.4.2 for instance).
Does load() not take a callback function as it's second argument? Why not reattach event handlers to the elements with that function?
$('#result').load('ajax/test.html', function() {
//reattach event handlers here.
});

Categories

Resources