关于jsp页面单击事件失效

今天需要把一个页面弹框中的内容独立成一个单独的页面，我把其他无用的代码删掉后发现单击事件竟然失效了，虽然最后的单击事件可以用了，但是我还是不明白是什么原因造成的<无奈/>

这是事件绑定无效时：

$(function() {
   
        var datatableConfig =newDatable(page_Size,disable_Items,column_Show_Items,data_Config); 
        table=$('#mainTable').DataTable(datatableConfig);
        new $.fn.dataTable.ColReorder( table, {} );
        /* 弹出添加Modal */
        $("#add").click(function() {
   
            $('#addOrEditModal').modal('show');
        });
        jQuery.validator.addMethod("isMobile", function(value, element) {
   
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        $("#modalForm").validate({
              rules: {
                  phone:{
                    required: true,
                    number:true,
                    isMobile : true
                  }
              },
              messages:{
                  phone:{
                      required:"请输入手机号",
                      number:"必须是纯数字" ,
                      isMobile : "请正确填写手机号码"
                  }
              }
        });


//照片上传

        $('#upPhoto').on("click",function(){
   

            if($('#uploadPhoto').val()==null||$('#uploadPhoto').val()==''){
                alertify.alert('请选择文件');