I have page which contains jQuery code:
$('#tstButton').live('click',function(){
alert();
});
And I load this page from ajax call.
When I load the page multiple times, each time it loads the script and stores to cache.
Say when I make ajax call three times. and click $('#tstButton') once, then it will alert 3 time.
I have used:
cache:false
in ajax call. But still its not clearing cache.
How can I clear these javascript codes from cache?
You can unbind the event first before binding using die() if you're using jQuery < v1.7.2.
$('#tstButton').die('click').live('click', function() {
alert();
});
If you're using jQuery v > 1.7.2
You can use on and off:
$('#tstButton').off('click').on('click', function() {
alert();
});
You can OFF your previously binded click using jquery OFF function.
$('#tstButton').off("click").on('click',function(){
alert();
});
In my opinion, it is not a good solution to bind \ unbind event every time when you have dynamically loaded page.
You can use event delegation and bind it only once.
Execute this once on page load and it will properly work on any dynamically added elements:
$(document).on('click', '#tstButton', function() {
alert();
});
document can be replaced with more precise non-updating container which stores this button.
Here is a working JS Fiddle Demo
Related
I have a slider button created using a JavaScript plugin, which automatically generates an element with class name .flex-next. However, when I run the following code, nothing is logged in my console:
$(window).load(function() {
$( ".flex-next" ).on( "click", function() {
console.log("youclick");
})
});
Since the button is added dynamically after the dom is loaded, you need to use event delegation so the click event can be used on this button:
$(document).on('click','.flex-nex',function() {
console.log("youclick");
})
Your setting your call to fire when the window loads by using $(window).load(...);. A flexsider is initiated on $(document).ready(...) which happens after the window loads and all of the content is loaded into the DOM. So when your script fires, it looks for an element that isnt there yet.
Get around this by firing your script on $(document).ready(), and use event delegation. The best practice way is to declare your function like so:
$(document).ready(
$(document).on('click', ".flex-next", function() {
console.log("youclick");
});
});
this way your click listener will wait until the page is ready and will put a click event on to any .flex-next event, even those created dynamically. That way if your using large imagery that is loaded asynchronously the code will still work.
You are probably calling your $(".flex-next").on call before the slider button has been executed. So, basically, your .flex-next class doesn't exist in the DOM yet when you call the .on
You should call the .on call after plugin has been initialized.
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.
I'm transferring a normal site to jQuery mobile. I've got some of event bindings, as well as other page specific adjustments:
$('.roulette-img').css({
});
$('.shuffle-img').each(function(){
});
$('.button').bind('mousedown', function(){
});
$('.spin-btn').bind('mousedown', function(){
$(document).bind('mouseup', function(){
});
})
$(window).resize(function(){
});
Right now certain pages don't work as they should (by not firing these events). I understand this is because of jQuery's ajax navigation, that the script only loads once when the first page is loaded and as a result all subsequent content loaded in via AJAX doesn't get binded to events.
Which way is the best to get around it?
First don't use bind, it is deprecated and removed from jQuery versions 1.9 +. Use on instead. Here's an example:
$('#buttonID').on('click', function(){
});
Also if you want to execute something inside a certain page you need to do it inside a jQuery Mobile page event, like this:
$(document).on('pagebeforeshow', '#index', function(){
});
I made you a working example: http://jsfiddle.net/Gajotres/8hKe2/
Here you can see what it looks to use page events to execute a code for specific pages.
everything you want to know can be found in this answer/article: jQuery Mobile: document ready vs page events
If you want your handlers to be bound to new pages as they're loaded, you can use the pageinit event and restrict your selectors to the page that is currently initialized:
$(document).on("pageinit", function(e) {
$(".button", e.target).on("mousedown", function() {
// ...
});
$(".spin-btn", e.target).on("mousedown", function() {
// ...
});
});
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.
I have a JSP that uses jQuery and CRIR to display a form with radio buttons. I'm using CRIR to style the radio buttons to give them a custom look.
CRIR appears to set itself up on load with something like this:
crir.addEvent(window, 'load', crir.init, false);
I want to perform some initialization on page load but after crir.init (because crir.init sets all the radio buttons up). When I use
$(document).ready( function() {
updateUIOnLoad();
});
it appears to get called before crir.init.
I'm not familiar with Javascript events, so I was wondering if there was a way to set things up so that a function would execute on document load but after crir.init.
The problem, so far as I can tell, is that crir is setting itself up on the window's 'load' event, whereas your jQuery's responding on the document 'ready' event (which, as you've seen, precedes the window's 'load' event).
You could change the jQuery to:
$(window).load(
function(){
updateUIOnLoad();
});
So long as this follows the call to crir in the mark-up, it should work (and does, on localhost, but sadly I couldn't make a JS Fiddle demo work properly).
Also you can test for crir as part of a function call:
$(window).load(
function(){
if (crir) {
updateUIOnLoad();
}
});
There's a demo of this, sort of, working on my site at: http://davidrhysthomas.co.uk/so/soCrir.html.