关于一段Jquery代码，不报错但是莫名失效问题

[Weason_Ye]

//这里动态添加了图片
function imginit(){
  var top = 150;
  var left = new Array(650,950);
  for(var i = 0; i < 10; i++){
    var images = document.getElementById('images');
    var tempimg = document.createElement('img');
    tempimg.setAttribute('class','img'+(i+1));
    tempimg.setAttribute('src','css/images/img'+(i+1)+'.jpg');
    tempimg.setAttribute('style','top:'+(top+(Math.floor(i/2)*280))+'px;left:'+left[i%2]+'px;');
    images.append(tempimg);
  }
}
window.onload = function(){
  imginit();}
//选择图片功能，实现将图片拖动到一个目标区域//突然失效//这段代码写在$(document).ready(function{})里了
    $('img[class^=img]').on({
      mousedown:function(e){
        var img = $(this);
        var os = img.offset();
        sessionStorage.setItem("left",os.left);
        sessionStorage.setItem("top",os.top);
        e.preventDefault();
        dx = e.pageX - os.left;
        dy = e.pageY - os.top;
        $(document).on('mousemove.drag',function(e){
          sessionStorage.setItem("cleft",e.pageX - dx);
          sessionStorage.setItem("ctop",e.pageY - dy)
          img.offset({top:e.pageY - dy,left:e.pageX - dx});
          $("#target").text("请放这里！");//目标区域是一个div//高度宽度都是144px
        });
      },
      mouseup:function(e){
        var target = $('#target');
        var tos = target.offset();//获取目标区域的top和left
        if((tos.left+250) >= sessionStorage.getItem("cleft") && (tos.left-250) <=sessionStorage.getItem("cleft")
      && (tos.top+250) >= sessionStorage.getItem("ctop") && (tos.top-250) <= sessionStorage.getItem("ctop")){
//判断图片是否接触到目标区域
        target.css('background',"url("+$(this).prop('src')+")");
        target.css('background-size','144px 144px');
      }
      target.text("");
      sessionStorage.setItem('picture',"images/"+$(this).prop('class')+".jpg");
        e.preventDefault();
        $(document).off('mousemove.drag');
        $(this).offset({top:sessionStorage.getItem("top"),left:sessionStorage.getItem("left")});//让拖动的图片弹回原位置
      }
    });

1、在编写的过程中这段代码是可行的，但是写完另一个页面后，再来调试，就不能拖动了
2、也有可能是下载了apache-tomcat，运行startup.bat修改了啥？？下之前还能正常拖动的，当然这只是猜测，很不靠谱。
3、在别人的电脑的谷歌浏览器上也无法实现拖动，试过新建文件复制粘贴、放入tomcat运行（这个直接404了）、修改过可能错误的地方，还是不行，导入js文件的顺序是正确的。

[Weason_Ye]

尝试过放入window.onload里了还是无法实现，放入imginit()也不行，换了原生js再编写还是不行。

[ambit_tsai-微信]

引用 3 楼 Weason_Ye 的回复:

尝试过放入window.onload里了还是无法实现，放入imginit()也不行，换了原生js再编写还是不行。

这样你在绑定事件的时候把$('img[class^=img]')输出看看，确保能获取到你要的元素。

[ambit_tsai-微信]

window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。 因此，代码中绑定事件是先执行的，然而此时元素都还没初始化呢，so，就不生效了。

[winzond]

选择祖先元素绑定事件，语法：$(selector).on(event,childSelector,data,function)，祖先元素一定要在绑定事件之前就存在

$("images").on("mousedown","img[class^=img]",function(){......});

[Weason_Ye]

引用 4 楼 ambit_tsai 的回复:

[quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现，放入imginit()也不行，换了原生js再编写还是不行。

这样你在绑定事件的时候把$('img[class^=img]')输出看看，确保能获取到你要的元素。[/quote] 试过了，取得到的，然后呢？ 我在绑定时间里试着输出一些值，发现控制台没有输出，说明应该是没有出发那些事件，这该怎么解决？确定了绑定事件的代码是放在window.load里的。

[ambit_tsai-微信]

引用 5 楼 Weason_Ye 的回复:

[quote=引用 4 楼 ambit_tsai 的回复:] [quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现，放入imginit()也不行，换了原生js再编写还是不行。

这样你在绑定事件的时候把$('img[class^=img]')输出看看，确保能获取到你要的元素。[/quote] 试过了，取得到的，然后呢？ 我在绑定时间里试着输出一些值，发现控制台没有输出，说明应该是没有出发那些事件，这该怎么解决？确定了绑定事件的代码是放在window.load里的。[/quote] 你绑定事件的语法是不是有问题？我查了下官方API： .on( events [, selector ] [, data ], handler )

// 示例
$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

[Weason_Ye]

引用 6 楼 ambit_tsai 的回复:

[quote=引用 5 楼 Weason_Ye 的回复:] [quote=引用 4 楼 ambit_tsai 的回复:] [quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现，放入imginit()也不行，换了原生js再编写还是不行。

这样你在绑定事件的时候把$('img[class^=img]')输出看看，确保能获取到你要的元素。[/quote] 试过了，取得到的，然后呢？ 我在绑定时间里试着输出一些值，发现控制台没有输出，说明应该是没有出发那些事件，这该怎么解决？确定了绑定事件的代码是放在window.load里的。[/quote] 你绑定事件的语法是不是有问题？我查了下官方API： .on( events [, selector ] [, data ], handler )

// 示例
$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

[/quote]

  $('img[class^=img]').on('mousedown',function(e){
      var img = $(this);
      var os = img.offset();
      console.log(os.left);
      sessionStorage.setItem("left",os.left);
      sessionStorage.setItem("top",os.top);
      e.preventDefault();
      dx = e.pageX - os.left;
      dy = e.pageY - os.top;
      $(document).on('mousemove.drag',function(e){
        sessionStorage.setItem("cleft",e.pageX - dx);
        sessionStorage.setItem("ctop",e.pageY - dy)
        img.offset({top:e.pageY - dy,left:e.pageX - dx});
        $("#target").text("请放这里！");
      });
    });
    $('img[class^=img]').on('mouseup',function(e){
      var target = $('#target');
      var tos = target.offset();
      console.log(tos.left);
      if((tos.left+250) >= sessionStorage.getItem("cleft") && (tos.left-250) <=sessionStorage.getItem("cleft")
    && (tos.top+250) >= sessionStorage.getItem("ctop") && (tos.top-250) <= sessionStorage.getItem("ctop")){
      target.css('background',"url("+$(this).prop('src')+")");
      target.css('background-size','144px 144px');
    }
    target.text("");
    sessionStorage.setItem('picture',"images/"+$(this).prop('class')+".jpg");
      e.preventDefault();
      $(document).off('mousemove.drag');
      $(this).offset({top:sessionStorage.getItem("top"),left:sessionStorage.getItem("left")});
    });

改成这样了，还是监听不到点击，很难受，又没有报错，感觉无从下手。 之前用原生js又编过一遍的，还是不行，还是接收不到鼠标点击。 img标签不应该默认是可以拖动的吗（dragable为true），可是我注释掉这些事件后，再去试着拖动图片，没有任何反应。 终于发现错在哪了，不是js代码的问题，是我把一个作为容器的div的z-index值设置大了，挡住了图片。。。崩溃崩溃。 谢谢你耐心帮我想办法啊