I have content that I'm loading using an AJAX call and displaying the HTML (consisting of divs, etc) inside of a ul parent.
Now I've written a series of .click and .hover functions that work perfectly on everything, right up to where my content is dynamically loaded, and then don't work at all on the dynamically-loaded content.
I've gone through all my div ids to make sure they are correct and they are. Is there a way to gain control over the AJAX-loaded material?
The problem is that your code run only with the elements that existed at that time and no the "future" elements. You have 2 choices:
1) Re-run your "onload" javascript code (that was applied on document ready) after you load your ajax content.
2) Use .live() instead of .bind():
So change
$('#selector').bind('click', function(){..
To
$('#selector').live('click',function(){..
The difference is that live uses the elements that match the selector now and in the future, versus bind uses the elements that match the selector only at the time it's called.
Hope this helps. Cheers
Your event handlers are bound to elements that exist at the time that they are set.
Either re-attach the handlers to the new, dynamically-created material, or make use of live or delegate; these "attach a handler to the event for all elements which match the current selector, now and in the future".
You should either rebind the events after the content is loaded or use
.delegate (api) to have the event attached automatically to newly loaded elements.
something like:
$("ul#container").delegate("li", "hover", function(){
doStuff();
});
$("ul#container").delegate("li", "click", function(){
doOtherStuff();
});
Change
$('a#whatever').click(function(){....
To
$('a#whatever').live('click',function(){....
Related
First I want to say that the code in jsfiddle works exactly as I'm expecting. However, when I try to insert it in my page, it does not work.
I am using
get.ajax
To move html with php a mysql data into a div named #latest-divs. I have a form with an
input#search
button that gets
val()
when
.bind('input property...)
and checks if there is exact match in the child divs of #latest-divs. I call these child elements
#latestblock
If there is exact match, then the event should execute, which, as I mentioned above, works in the jsfiddle but dies on my site. I have attempted everything I could think of:
Load in php file
Load from head
Load from body
Load with and without "CDATA"
Change my jquery version
My site is codefault (dot) org.
The jsfiddle link is http://jsfiddle.net/gAnyM/10/.
As of right now, I am loading the second part (random positioning of divs) from script/latest-topics.php and the first part in head, from index.php.
are you sure you have it inside a:
$(document).ready( function() {
// code here
});
?
The dom needs to be ready before you bind things
jsfiddle adds this for you automatically
Try another kind of event
$('input#search').bind('change keyup', function()
i have a code that displays event information from the database. the parent container's id is show_id. Inside show_id there is some hiden div event_more_details with contents thats only supposed to show when i hover on the parent div which is show_id (in my case am using mouseenter function). Here is the code:
$('.show_event').mouseenter(function(){
$('.event_more_details').fadeIn(500);
});
Problem is, if the php generates five events, when i hover on one event, the hidden div fades in all the other parent divs, too.
If I correctly understand your HTML structure, you can use this:
$('.show_event').mouseenter(function(){
$(this).siblings('.event_more_details').fadeIn(500);
});
.siblings() applies a selector to sibling elements. (docs)
After going through the jquery functions library i think i found an answer:
$('.show_event').hover(function () {$(this).find('.event_more_details').fadeIn(500);}, function () {$(this).find('.event_more_details').fadeOut(500);});
This works fine for me,by the way, #Ohad thanks alot 444 your help.
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I have some tabs in header and use Xajax to load big modules - almost whole page. There are some class inside that I use to call by jQuery (like anchor with some class and then click event...).
But when I load a new module and assign new content (with new classes and id's) jQuery selectors seem don't work - i.e after click anchor nothing is happen.
Quite similar situation appear when you forget $(document).ready(...) using jQuery.
Is there any solution to tell jQuery about new content, new class and id's, that wasn't available when page was loaded?
This is because you're event binding only works for DOM elements that exist when the binding is called. Since your modules are loaded after the binding ($('#sel').click(..)) is called, those DOM elements will not be bound to the event handler.
To work around this, you can use the jQuery .live() method to bind elements that will be loaded later. jQuery will keep track of all the new DOM items being created and will call the binding on the new elements as well.
http://api.jquery.com/live/
LIVE DEMO
<div class="clickme">
Click here
</div>
$('.clickme').click(function(){
alert('click event from normal binding!');
$(this).parent().append('<div class="clickme">Click here - won\'t trigger for normal bind</div>');
})
$('.clickme').live('click', function(){
alert('click event from live binding!');
})
I use this to toggle my div elements, and hide all them when the DOM is ready...
$('div[class*="showhide"]').hide();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.showhide' + nr).toggle(400);
});
I have dynamically created div elements with class showhide0;showhide1;showhide2...etc...
Inside the DIV tags I have search boxes.
First when page is loaded all DIV tags hide.
I toggle one of them to show.
Start a search, so the page is reloaded with the result of the query.
Of course all DIV is hide again, because the page is reloaded. Unfortunately...
Is it possible to not hide again after I searched for something? It would be nice when I open the page, all the divs are hidden, but after then just when I toggle it...
If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.
This can be done in numerous ways which include but are not necessarily limited to
Include it in the query string
Include it in the URL hash
Use a cookie
Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.
We do something similar to this where I work.
We opted instead of have the class name just be hide for all elements and instead have the ids named.
So, we'd have it something like:
<div id="hide1" class="hide"> </div>
along with this CSS to hide all those divs by default
.hide {
display: none;
}
Finally, we use something like this to show them:
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('#hide' + nr).toggle(400);
});
}
This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.
As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.
You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.
var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);