jQuery (Focus & Blur) not selecting fields loaded using $ajax->observeField()

Question

Hi There,

I've added a tooltip feature to my application because parts of the ordering system can be confusing to some of our newer users, it's simple jQuery:

$(document).ready(function(){
    $('input, select, textarea').focus(function(){
        $class = $(this).attr('title');
        $('.tooltip_' + $class).fadeIn(500);
    });

    $('input, select, textarea').blur(function(){
        $class = $(this).attr('title');
        $('.tooltip_' + $class).fadeOut(500);
    });

});

Here is an example of how I use this with the form helper:

<?php echo $form->input('reference', array('title' => 'reference', 'after' => '<div id="tooltip" class="tooltip_reference">This is your order reference, it should be unique to your customer.<span class="pointer"></span></div>')); ?>

This works initially however, in my action I use a few instances of $ajax->observeField to load extra select fields, these select fields are ignored by the jQuery focus and blur despite the html generated being correct.

See below:

<?php echo $form->input('Order.option.'.$choice['Choice']['option_id'].'.'.$key, array('options' => $choices, 'title' => $value['Tip']['class'], 'after' => '<div id="tooltip" class="tooltip_'.$value['Tip']['class'].'">'.$value['Tip']['tip'].'<span class="pointer"></span></div>')); ?>

I'm not too sure why this is happening, I loaded the jquery file using the following in the original view (not views loaded via ajax) so that appears in the header

<?php echo $javascript->link(array('jhint'), false); ?>

Any help would be appreciated.

Answer 1

I made a bit of a mistake with my jQuery, by using the following:

$(document).ready(function() { ... });

I had overlooked that this would exclude content loaded after the page load, it's the smallest mistakes that really trip me up at times...