Script loaded in header isn't recognized in Ajax, why?

Script loaded in header isn't recognized in Ajax, why?

This is kinda tough to explain, so bear with me.

On mobile devices, I load a script named "mobile.js" in the header. This script has functions to detect a swipe and a taphold (which I believe were both recommended on here), and then I also include a function to hide a specific element when the user focuses on an input, textarea, or contenteditable:

  1. $(function() {
  2.       if ($('#local_banner').css('display') != 'none') {
  3.             $('input, textarea, [contenteditable]')
  4.                   .on('focus', function() {
  5.                         console.log('a');
  6.                         $('#local_banner').hide();
  7.                   })
  8.                   .on('blur', function() {
  9.                         console.log('b');
  10.                         $('#local_banner').show();
  11.                   });
  12.       }
  13. });

I load the contenteditable script on the page in a separate Ajax, mainly because it's a little hefty in size, and since it loads near the bottom of the page I just force it to be the last thing to load.

Input tags and textareas load on the page normally, though.

What I've discovered is that when I click on an input element, #local_element hides and shows as expected. But clicking on the contenteditable doesn't do anything, and it doesn't show up in the console log that the focus or blur are triggered at all.

But when I moved the above script to the bottom of the Ajax, though, it DID work.

To add to the confusion, I have another script in the header (just below mobile.js) that runs on all devices, and it includes variable names, the Ajax function, etc. This script DOES appear to be running within the Ajax!

Can you guys suggest a reason why this one script isn't running as expected?