When trying to load a file using the .load function, that newly loaded file isn't affected by my jQuery in the parent file that it's being loaded into. Instead of adding the <script src=''></script> code in every page that's being loaded, is there a better way to get my javascript file working within those files? Or is that the only way to have the javascript work within the newly loaded files?
-
Could you put a jsFiddle together?Mr. Mr.– Mr. Mr.2012-11-01 15:59:22 +00:00Commented Nov 1, 2012 at 15:59
-
Sure, ill try. I thought my question didn't really need code. I was just curious if there was another method for .load but better?UXerUIer– UXerUIer2012-11-01 16:02:38 +00:00Commented Nov 1, 2012 at 16:02
-
jsFiddle seems to not be working for me.UXerUIer– UXerUIer2012-11-01 16:04:41 +00:00Commented Nov 1, 2012 at 16:04
-
Could you describe the file you are loading? Is it an HTML file?user1726343– user17263432012-11-01 16:06:16 +00:00Commented Nov 1, 2012 at 16:06
Add a comment
|
2 Answers
It all depends on how your script is set up. No script means no exact solution.
The .load() method loads a script while your current script is running. That means that when the file is being loaded, your script is most likely done running.
Thats why we have callbacks. Callbacks are run after another action is done.
$.load(url, function(responseText, textStatus, XMLHttpRequest) {
var paragraph = $('<p />').html(responseText);
// append new paragraph
$(document.body).append(paragraph);
});
// hide all paragraphs
$('p').css('display', 'none');
I can imagine you think the paragraph that is being added will hide, because we hide all paragraphs.
Wrong
By the time your paragraph is added to the body, the line responsible for hiding your paragraphs will already be done. So, you have to perform the action in the callback (again) like so:
$.load(url, function(responseText, textStatus, XMLHttpRequest) {
var paragraph = $('<p />').html(responseText);
// append new paragraph
$(document.body).append(paragraph);
// do it again
$('p').css('display', 'none');
});
// hide all paragraphs
$('p').css('display', 'none');
Sounds like you are trying to make event handlers bind to elements AFTER the page has loaded? For example you may have something in the parent document that does something like:
$('#something').click(function(){ alert('You clicked me'); }
These event handlers are "bound" immediately and will not affect elements loaded in using .load(). What you must do is use the live() binder, or the .on() binder. .on() is preferred but it can be a little weird to get used to, to begin with.
The quickest way to solve your issue is to change your event binds from .click , .change e.c.t. to .live('click', function(){} ) and .live('change', function(){}) respectively.
Alternatively using the correct method of on() you should do:
$(document).on('click', '#element', function(){ alert('you clicked me'); });
the element you run the on method on should be a parent container that is loaded NOT via .load where all the elements your binding to sit inside. document is sufficient and will work, but its not the best in regards to performance
If you post your code we can provide a more tailored answer. I've tried my best to explain it in detail but i may have over complicated it. So if you have any questions then just ask.
jQuery.on() : http://api.jquery.com/on/
jQuery.live(): http://api.jquery.com/live/