css - I've refreshed ul tag so jQuery styles can be applied but my page just displays a loading jQuery image -

i'm developing woocommerce theme wordpress , i'm trying add attributes <ul> element jquery mobile styles can applied it.

to i've enqueued script hook named 'woocommerce_before_shop_loop'.

the scrypt follows:

(function ($){ $(document).on('pageinit','#shop', function(){     $('ul').attr('data-role', 'listview');     $('ul').attr('data-inset','true');     }); })(jquery); 

with script i've managed add attributes <ul> tag wanted. way jquery mobile styles not applied. i've refreshed list jquery can add class atributes dinamically. new script is:

(function ($){ $(document).on('pageinit','#shop', function(){     $('ul').attr('data-role', 'listview');     $('ul').attr('data-inset','true');     $('ul').listview(); // refresh <ul> tag }); })(jquery); 

like have accomplished jquery can add classes dinamically , i've been able check using chrome console. jquery classes added page isn't displaying content, displays jquery loading image content never shows.

here can see website: http://danielvivancos.com/edu/wordpress/shop/ , loading image. can check chrome console inside <div id="shop" ...> attributes i've set in script , class jquery have been added <ul> tag.

i hope can me solve issue.

thanks in advanced!