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() {
// ...
});
});
Related
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
I have a javasript function that should change the value of an element appended after document is ready.
What I mean is: If the javascript appends a div like: <div class="new-div"></div>, I cannot intercept actions on that DIV.
This code does not work:
$(document).ready(function() {
$('.new-div').on('click', function(){
alert('clicked');
});
});
But this code, using delegate, works fine:
$(document).ready(function() {
$(document).on('click', '.author-profile-articles-table', function(){
alert('clicked');
});
});
However, when the scroll event is needed, the following code does not work:
$(document).ready(function() {
$(document).on('scroll', '.author-profile-articles-table', function(){
alert('scrolled');
});
});
According to t.niese, scroll events do not propagate through DOM, so one can't use it with delegate to make this work.
Script tags along with the html do work but I don't feel it is an elegant/smart way.
The question is, if a scroll intercepter does not work with DOM, is that a way to put the event interceptors from a separate javascript file or the html script tag is the only option?
Cheers,
I made it work using the bind tag:
When I finished performing a given action, a trigger an event using:
$.trigger('eventName');
Than I build the event listener using bind:
$(document).bind('eventName', function(){
// Do your stuff here.
}
It works smoothly =)
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'm loading a simple page using:
$.get('../admin/login.php', function(data) { $('#box-contents').html(data); });
Now, on this login.php page I have an input field, and in my global JavaScript file, I have an event that triggers on .change() - but this isn't firing!?
Is this because I have loaded this file on the page so jquery doesn't know that it's now there? Do I need to also include my global JS file within the 'login.php' page too?
Any help on this would be much appreciated
instead of using .get(), use .load() as it was intended for this purpose. Also for your .change() event, you need to either attach it after the element exists (which could be done in your callback below), or you can use .live() to attach the event to any current or future DOM elements.
Callback method
$('#box-contents').load('../admin/login.php', function() {
$('input').change(function() {
//do stuff on change
});
});
Live method
$('input').live('change', function() {
//do stuff on change
});
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.