ol为地图容器添加单击事件监听无效

Question

<div id="map">

        <div id="mouse-position"></div>

    </div>
    <script type="text/javascript">
        var map = new ol.Map({
            target : 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers : [
            //加载瓦片图层数据（OSM）
            new ol.layer.Tile({
                source : new ol.source.OSM()
            }) ],
            //地图视图设置
            view : new ol.View({
                center : [ 12900000, 4900000 ], //地图初始中心点
                zoom : 8
            //地图初始显示级别
            }),
            controls : ol.control.defaults(),
        });

1.为地图容器添加单击事件监听用jquery筛选绑定有用；

         //为地图容器添加单击事件监听
        $("#map").on('click', function (evt){
            alert("111");
             var type = $("input[name='label']:checked").val();
             var point =evt.coordinate;  //鼠标单击点坐标
             console.log(point);
             if (type == "vector") {
                 alert("111");
                  addVectorLabel(point);//添加一个新的标注（矢量要素）
             }
          });

         /**

2.直接绑定没有用

         //为地图容器添加单击事件监听
        map.on('click', function (evt){
            alert("111");
             var type = $("input[name='label']:checked").val();
             var point =evt.coordinate;  //鼠标单击点坐标
             if (type == "vector") {
                  addVectorLabel(point);//添加一个新的标注（矢量要素）
             }
          });

         /**