We Keep Coding

Moment.js not working on dynamically loaded elements [duplicate]

I am using .load() to pull static HTML files onto my main HTML page. The scripts and selectors that I have written exist within:
$(document).ready(function(){});
But they don't work on the AJAX loaded content. I have read that this is because the selectors that I am using are not available.
Is there a better way to do this? Adding the script to the window.load function doesn't work either:
$(window).load(function() {});

$(document).ajaxComplete(function(){
// fire when any Ajax requests complete
})
ajaxComplete()

There are more than one option:
you can add initialization scripts [ $(this).click... ] into callback function of $.load()
you can use $.live(), which creates handlers even for dynamically loaded/created objects.
More here:
callback: http://api.jquery.com/load/ (notice the "complete()" function)
bind: http://api.jquery.com/live/
Edit: My mistake, it was live(), not bind(), thank you guys

You can bind events to dynamically loaded content via jQuery's $.live().
From jQuery http://api.jquery.com/live/:
Attach a handler to the event for all elements which match the current selector, now and in the future.

jQuery load takes an optional callback function argument which you could use to do any setup you need AFTER your ajax-ed content is loaded

event listeners on load by ajax

I upload to the page elements by ajax and some of them have children with class "evented". I need to add class to parent on child load. I tried this
$(document).on('load','.evented',function(){
$('.evented').parent().closest('td').addClass('td_class');
});
But as expected it doesn't work because td doesn't have "load" event. I can execute this code like a part of ajax response but in this case I will have duplicate event listeners and I still need same code for elements that exist when document is ready.

I assume you are using load() method to load the contents, In that case you have to make use of the success handler of the load method to do this.
$(el).load(url, function(){
$(this).find('.evented').closest('td').addClass('td_class');
})
If you are not using load() method, instead other ajax methods like $.ajax()/$.get() etc then after you add the contents to your page you will have to do this like
$.ajax(...).done(function(result){
$(el).html(result).find('.evented').closest('td').addClass('td_class');
})

jquery .ready event on dynamic content

I have a dynamic list loaded into a HTML 5 web app built using jquery mobile + (jquery and javascript).
I want to display a simple "loading..." image by placing a <div> on the page while the list is populated dynamically. Once the list is complete I need a event to fire to remove the "loading..." image. Is it possible to attach the .ready or .load events to a element of the dynamic list so I get a event to fire when the list has loaded?
Thanks for any advice, searching for existing answers on the .ready subject only provides results about document.ready use of the event.

Use the callback function.
$(function() {
$('#content').html('<div>loading...</div>');
$('#content').load('http://mynewcontent.com/', function(data) {
// optional: do more stuff here.. not needed since the content will already be replaced.
});
});

jQuery's .load provides a complete callback function that you could use to remove the loading image.
http://api.jquery.com/load/

jQuery - document.ready not firing when content loaded with AJAX

I have a simple custom tabbing module, that loads tabs with an AJAX request (via $(elem).load()). On each page that is loaded with AJAX I have some JavaScript. The first time the page loads (via direct input of URL, not AJAX), the javascript fires up perfectly. When I navigate away from the page via the AJAX tabs, the javascripts from the pages aren't loading anymore.
Is there any way I can force them to execute?
(The javascript that is not firing is placed in a $(document).ready() function if that helps)

You need to use callback of load() function:
$(elem).load('source.html', function() {
// here you need to perofrm something what you need
ActionOnDocumentReady();
});
You can put all your actions in $(document).ready into some function (ex ActionOnDocumentReady()) and call it on load() callback.

the domeready event fires only when is initial dom is ready (like the name and the jquery-api suggest).
if you want to use jquerys load() and fire a function if that loading has been done, you'll have to use a callback-function (according to the api).
if you want to do the same thing on domready and load-events, the best way would be to define a new function for that:
function dostuff(){
// do some stuff here
}
and fire this function in both cases:
$(function(){ // domready | shortcut for "$(document).ready()"
dostuff();
})
$('#something').load('script.php', function() { // callback on load()
dostuff();
});

Put your $(document).ready() code in a new method. Lets call it methodA. Now call this methodA from $(document).ready(). Secondly, call the same method after ajax request is successful. That should solve your problem.

How to assign an Ajax success handler when loading jqmodal dialog?

What I need is very simple but, searching the web, I didn't find any example.
I am using the jqModal jQuery plugin for displaying content dynamically (via Ajax) in a modal dialog. Once, this modal content is loaded, I need to bind some event on the dialog DOM elements. Therefore, I would like to assign an handler to the "success" AJAX event for manipulating these DOM elements.
The problem is that, looking into the jqModal documentation, there is no 'success' defined events. For instance, the code:
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
will call the examples/2.html for the Ajax request and the response content will replace ex2 content...
...but how can I define my handler for success (or error) such that I can bind some events on the new content of '#ex2' ?
Thank you in advance for your help,
Fabien.

I'm guessing you're using the jqModel plugin? For success (not sure of error) you can add onLoad(callback) as detailed here
So for instance
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger', onLoad: doStuff});
function doStuff() {
//Do stuff here
}

You can use the onLoad callback, see here: http://dev.iceburg.net/jquery/jqModal/
$('#popup').jqm( { onLoad:onLoadCallback } );