Javascript is not loading after another one is loaded

I got a problem with javascript. The situation is after clicking a tag to append div by javascript like the code below

This is HTML

<a class="xemhinh" href="https://3.bp.blogspot.com/-SrY4SGEWA0U/XkzC8iFrPWI/AAAAAAAAFck/pj319hsOteYRIVjJ2Z8RNJ5y_fjr_e8xQCKgBGAsYHg/s1600/ban-nha-duong-so-59-phuong-14-quan-go-vap-2.jpg">
<img class="img" src="https://3.bp.blogspot.com/-SrY4SGEWA0U/XkzC8iFrPWI/AAAAAAAAFck/pj319hsOteYRIVjJ2Z8RNJ5y_fjr_e8xQCKgBGAsYHg/s1600/ban-nha-duong-so-59-phuong-14-quan-go-vap-2.jpg" />
</a>

This is first Javascript ( passed )

$(document).ready(function(e) {
if (typeof jQuery.fn.live == 'undefined' || ! (jQuery.isFunction(jQuery.fn.live))) {
  jQuery.fn.extend({
    live: function (event, callback) {
      if (this.selector) {
        jQuery(document).on(event, this.selector, callback);
      }
    }
  });
}
$('a.xemhinh').click(function(){
  var link_hinh = $(this).attr('href');
  $('body').append('<div class="zoom"><img src="'+link_hinh+'" /></div>'); //class="zoom" to call js zoom/pinch
  return false;
});
});

But the zoom/pinch not working. Below is the js code that I shortened because I think the problem that is in the way the function is called. Full code at here.

This is the second javascript ( failed )

function zoom(classNames, settings) {         //Working in <div class="zoom">
    classNames = (typeof(classNames) !== 'undefined'&& Object.keys(classNames).length ? classNames : {});
    settings = (typeof(settings) !== 'undefined'&& Object.keys(settings).length ? settings : {});
    ......

I'm sure 100% every piece of code is full of syntax or ; because when replacing images directly into <div class="zoom"> the second javascript still works very well. You can see it work live at here

Does anyone have any suggestions for me? I will appreciate you a lot!

Thanks in advance!