jquery - How to access the data attributes of that element in case it is used with document.addEventListener -

Earlier I was using jquery dynamic generate checkboxes and unchecking events and everything worked fine under the browser Was there.

But I realized that these incidents are not being captured on mobile, so I am using the document in Reido. To capture ADSTListner,

  document.addEventListener ('click', function) {if ($ (Event.target) .is ('.ui-checkbox-on')) {Var cost = $ (this). Data ('cost'); alert (cost);} and if ($ (event.target) .is ('.ui-checkbox-off')) {var cost = $ ( This). Data ('cost'); warning (cost);}}, true);  

But my question is that when I am trying to use the data attributes of those elements which are being undefined.

Please see this Bela

And please let me know how to solve this

Since you are referring to the handler this document object inside the handler for the document object in which data-cost is not why you are getting undefined .

Since you are targeting the ui-checkbox-on / off element, which is referred to by e.target to obtain data For

  var cost = $ (event.target). Data ('cost');  

Demo: