Magnific-popup is not working with dynamically loaded content

See more:

CSS

HTML

Ajax

jQuery

I have loaded the below HTML dynamically through ajax call.

<div class="item-wrap"><a href="http://myfourwalls.in/project_details/hoysala_ace_2/floor_plans/101_blockd.jpg" title=""><div id="hotspot-32" class="hs-wrap hs-loading"><img src="http://myfourwalls.in/project_details/hoysala_ace_2/floor_plans/101_blockd.jpg"><div class="hs-spot-object" data-type="spot" data-x="355" data-y="436" data-width="30" data-height="30" data-popup-position="left" data-visible="visible" data-tooltip-width="150" data-tooltip-auto-width="false"></div><div class="hs-spot-object" data-type="spot" data-x="466" data-y="781" data-width="30" data-height="30" data-popup-position="left" data-visible="visible" data-tooltip-width="200" data-tooltip-auto-width="true"></div><div class="hs-spot-object" data-type="spot" data-x="1010" data-y="490" data-width="30" data-height="30" data-popup-position="left" data-visible="visible" data-tooltip-width="200" data-tooltip-auto-width="true"></div></div><div style="padding:0px;text-align:center;list-style: none;"><ul><li class="grey">Area :1685 sq.ft</li><li class="grey">Pricing : 6000/Sq.ft</li><li class="grey">Facing : North</li><li class="grey">Balcony : 1</li></ul><!--<div class="overlay"--></div><div class="link-icon"><i class="icon-plus"></i></div></a></div>

I have the following script for magnific popup.

$('.item-wrap a').magnificPopup({

       type:'ajax',
       fixedContentPos: false,
       removalDelay: 200,
       showCloseBtn: false,
       mainClass: 'mfp-fade'

    });

But it is not working.It is showing one error in the console

Uncaught TypeError: $ is not a function

inside

jquery.magnific-popup.js:50

How can I solve this?I cant find whats wrong with this code?