呼び出されたjsファイル 自動的にa要素を追加したい

Question

今railsで制作中です。

%script{:src => "https://rawgit.com/manifestinteractive/jqvmap/master/dist/jquery.vmap.js", :type => "text/javascript"}
%script{:charset => "utf-8", :src => "/assets/jquery.vmap.world.js"}
:javascript
  (function($){
  $(document).ready(function(){   
      $('#vmap').vectorMap({
          map: 'world_en',
          backgroundColor: null,
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial',
          values: sample_data,
          markerStyle: {
              initial: {
                  fill: '#F8E23B',
                  stroke: '#383f47'
              }
          },
          markers: [
              {latLng: [41.90, 12.45], name: 'Vatican City'},
              {latLng: [43.73, 7.41], name: 'Monaco'}
          ],
      })
    });
  })(jQuery);

#vmap{:style => "width: 100vw; height: 100vh;"}
}

で読み出されていたｊｓファイルにclickしたら指定のページに飛ぶようにa要素を追加したいのですがどのようにすればいいですか？

写真の選択されている要素を囲うようなaタグ（<a href="…"></a>）の設定をしたいです。

一応

$("#jqvmap1_id").on("click", function() {
        $("#jqvmap1_id").attr({
          href: 'https://www…',
          target: '_blank'
        });
      });

で試したのですが、
①html要素が中に入ってしまう
②aタグが生成されない
でつんでます

おねがいします

Answer 1

jQuery Vector Map にもあるとおり、jquery プラグインは読んでいるが、コアライブラリとなるjQueryを読んでいないのが原因と思います。