css pointer-events property change and respective jquery events not triggering together

Question

Here is my code segment. I am using iscroll 4 for scroll in touch devices and desktop.

$('#next_item').bind('mousedown touchstart',function (e) {
        //do something onclick
        $(this).bind('mousemove touchmove',function(e){ //triggers only when i drag over it                 
                dragstart = true;
                $(this).css('pointer-events', 'none');
                myScroll._start(myDown);
                return;                     
        });
});

$('#next_item').bind('mouseup touchend',function (e) {
     if(dragstart) {
        dragstart = false;
        $(this).css('pointer-events', 'auto');
     }
});

I have the click event on #next_item which does a specific task and also have the drag event on #next_item which does different task. Now the problem is when #next_item receives drag event the css pointer-events is changed to none immediately but the drag is not triggering. When i do mouseup and then again drag from over #next_item then only the drag is triggered. I need the css pointer-events to pass drag event to the underlying element. Please suggest if i am doing anything wrong. Without pointer-events iscroll gives error while passing the drag event below #next_item

Answer 1

1. When you want to disable the pointer event for an element with .css():

   $('#element_id').css('pointer-events','none');
   

2. When you want to enable the pointer event for an element with .css():

   $('#element_id').css('pointer-events','');
   

In #1, the element gets disabled and then you cannot access that element.

In #2, the same element gets enabled and you can perform other jQuery operation on it.