How can I apply a greyscale script to dynamically loaded images?

Question

I'm relatively new to programming and I'm trying to put together a gallery. For the nav, I was hoping to get some help applying a greyscale effect to dynamically loaded thumbs.

I can get it to work when it isn't dynamically loaded (v1); all the thumbs appear grey and fade to colour on rollover), yet not with the dynamically image thumbs (v2)...

I'd appreciate any help. Thanks

v1: (non-dynamic thumbs)

The html : (working as intended) all thumbs are greyscale and fade to colour on hover

.....
<div class="sub_nav_wrapper">
    <ul class="sub_nav thumbs">
        <articlep>
            <li class="module variable">
                <img alt="" src="projects/thumbs/print/01.jpg">
                <span class="tn_viewbttn tn_dbttn">view</span>
            </li>
        </articlep>
    </ul>
</div>
.....

var mainDD = function(el){  
var t = this;  
t.$el = $(el);  
t.tdcs = [];  

t.lis = t.$el.find('articlep').children('li');
t.lis.each(function(){
t.tdcs.push(new mainDDComponent(this));
});

v2: dynamic

Here is the html for the dynamic thumbs:

<div class="sub_nav_wrapper">  
    <ul class="sub_nav thumbs">  
        <section id="projectsp">  
            <div class="content">  
            /*                              
            //*dynamically loaded content - thumbs  

            //----  
            //articlep  = ' <articlep>'
            //+ ' <li class="module variable">'
            //+ '   <img src="projects/thumbs/print/'+picturep+'" alt=""/>'
            //+ '   <span class="tn_viewbttn tn_dbttn">view</span>'
            //+ '   </li>'
            //+ ' </articlep>';
            //----
            */
            </div>
        </section>
    </ul>
</div>

All thumbs show as colour and only switch individually to greyscale on mouse over.

$('#projectsp').on('mouseover','articlep>li', function(){
    t.tdcs.push(new mainDDComponent(this));
});

Answer 1

Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

for more see this question