We Keep Coding

Getting a jQuery function to fire

I have a very simple jQuery function
$('#bnAddDegree').click(function () {
alert("bnAddDegree Loaded");
});
I have broken my site into different pieces based upon what the user clicks. If they click on a tab in the menu to load a section I call a partial_html page and load the section into the center div. If I put the code above into the main page load it will not fire. If I add an external js file and load it when the page loads it will not fire, I think because the elements are not initialized yet. If I put it into an external js page that is loaded after the partial_html is loaded it will not fire. If I put it ON the partial_html page with a tag it DOES fire. If I put a simple javascript function
function testFile() {
alert("File Loaded");
}
In the places that the jQuery code will not fire it works fine.
Is there something special that I'm missing with jQuery?
When I load the javascrip file I use
$.getScript("js/biosketch.js")
And test it with the simple javascript file and it works fine but not the jQuery call.

You need to use delegated event handlers since you are modifying the DOM dynamically.
$(document).on('click', '#bnAddDegree', function () {
alert("bnAddDegree Loaded");
});

Alternative to jquery $(document).ready(handler) when using javascript page transitions

In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.

If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });

you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });

AJAX stop working on loading same site different PHP id

So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes

When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});

jQuery-mobile and ASP.NET combination issue

I am developing a mobile solution with a combination of jQuery.mobile and
asp.net webforms.
For postbacks of my asp.net controls to work properly I have to disable ajax at
the top of the page, like this:
<script>
$.mobile.ajaxEnabled = false;
</script>
But when ajax is disabled like this, other functions doesn't seem to work.
I can't call dialogs/popups from jQuery document ready
For example:
$(document).ready(function () {
$('#myPopup').popup('open');
});
This will just cause the popup to show in less than a second,
then it dissapears. Also when I register a clientscript
from codebehind to trigger the popup when a serverside button
is clicked, the popup just flashes, then dissapears.
But when I disable ajax at the top of the page, the popup
calls works fine.
Any ideas how to get around these issues?

Document ready can not be successfully used with jQuery Mobile. It will usually trigger before page DOM is populated.
Instead of this line:
$(document).ready(function () {
$('#myPopup').popup('open');
});
Use this line:
$(document).on('pagebeforeshow', '#page-id', function(){
$('#myPopup').popup('open');
});
Where #page-id is an id of page that contains that popup.
jQuery Mobile has a problem with document ready so its developers have created page evenets to remedy this problem, read more about it in this ARTICLE or find it HERE.
EDIT :
I think your problem is also in $.mobile.ajaxEnabled = false; handling.
That code sample MUST be triggered from mobileinit event like this:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

I DID IT.....
DO NOT USE
instructions described here
simply open jquery.mobile-1.3.1.min.js file
fine ajaxEnabled:!0 and change it to : ajaxEnabled:!1
now hit CTRL+F5 and joy the project while it continues ! ;)

jQuery Mobile pageinit not working on first load pages (replicable)

Reloading a page or navigating directly to the jQuery Mobile hash URL does not fire the pageinit even once. For example, I have tried this on my secondary page:
$(function () {
$(page).bind('pageinit', function () {
console.log('bind pageinit');
});
$(document).on('pagecreate', page, function () {
console.log('pagecreate');
});
$(document).on('pageshow', page, function () {
console.log('pageshow');
});
$(document).on('pageinit', page, function () {
console.log('pageinit');
});
});
While on page one, I click to go to the page two and the above life cycles gets written to the console. The URL also appended #two. This is great, but when going to the link on another machine, the page init does not fire. It seems only a button click can trigger the page init.
I have a live example here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html. Paste this in the URL and events do not trigger: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two (notice the hash URL).

Yes I had the same problem.
For execute some javascript code on page init a use this structure:
$(document).bind("mobileinit", function(){
$('#mainPage').live('pageshow', function(){
// Some Javascript code
});
});
Now I can execute code all the time that the page was called.