jquery touchstart on checkbox can't trigger an overlay

I'm new to jQuery and html (only react before).

Right now I want to trigger an overlay when I touch a checkbox on touch devices.

Actually I have had finished this function(worked perfectly), but after some operation(like git commit or something else I dont know), the function suddenly couldn't work at all(the overlay cant show up).

I have spent the whole night to trying to debug. I think it must be some small mistake I made(like a wrong closing tag or something like this), but I cant find out.

Here is my code:

$(function(){
    $('div.touch-checkbox').on('click touchstart', function(e) {
//      e.stopPropagation();
        if (console && console.log) console.log('hi');
        $('.paulund_modal').paulund_modal_box();
    });
});


//the modal
(function($){
    $.fn.paulund_modal_box = function(prop){

        var options = $.extend({
            height : "250",
            width : "300",
            title:"Please select your time",
            description: "",
            top : ($(window).outerHeight() / 4) + 'px',
            left : (($(window).width() - 300) / 2) + 'px',
        },prop);
        if (console && console.log) console.log($(window).width());
        return this.click(function(){
        //this line of console log didn't run
            if (console && console.log) console.log('hi11');
            add_block_page();
            add_popup_box();
            add_styles();
            $('.paulund_modal_box').fadeIn();
        });

        function add_styles(){
            $('.paulund_modal_box').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2',
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'0px',
                'left':'20px',
                'float':'right',
                'font-size':'20px',
                'display':'block',
                'height':'50px',
                'width':'50px',
            });
            $('.paulund_modal_close').html(
                '<i class="fa fa-times"></i>'
            );
            /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

        function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

        function add_popup_box(){
            var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
            $(pop_up).appendTo('.paulund_block_page');

            $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut().remove();
                $('.paulund_block_page').fadeOut().remove();
            });
        }

        return this;
    };

})(jQuery);

.touch-checkbox{
    z-index:3;
    height:11px;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
  <meta charset="utf-8">
  <meta name="description" content="First time using jQuery">
  <meta name="viewport" content="width=device-width, initial-scale=1.0001">
  <link href="style/screen.css" rel="stylesheet" type="text/css" media="screen">
  <link rel="stylesheet" href="http://ift.tt/2g6N0YS">
  <script type="text/javascript" src="http://ift.tt/2a1Bldc"></scrip\
t>
  <script type="text/javascript" src="js/checkbox-touch-device.js"></script>
</head>

<body>
    <div id="portrait">
        <div class="paulund_modal"></div>
        <p>hello</p>
        <div class="touch-checkbox">
            <input id="sun12am" type="checkbox"> <label for="sun12am"></label>
        </div>
    </div>

</body>
</html>

As you can see, I want to give class .touch-checkbox a on click trigger(I only use touchstart with media query in my local dev environment, use click here for Code Snippets.).

the code until if (console && console.log) console.log($(window).width()); in JS file is useful, but cant return the overlay.

I'm sure this code did work at the beginning, I just wonder why it can't work at all without modifying(maybe I modified it by mistake but I didn't recognized)......

Can someone help me? thank you sooooo much.