$（document）.on用于自定义事件

I'm using ajax. So to keep form element working after ajax request, it has to use the following code

$(document).ready(function() {    
  $(document).on("change", "#my-chk", function(){
          $("#my_id input[type=checkbox]").prop('checked', this.checked);
        });

    $(document).on("click", "#add-account", function(){
           $.get('/my_url', function(data){ 
             alert(data);
          });
        });
});

However, what should I do to make the following event handler work after ajax request the same way I did above ?

$("#my-date-range-picker").daterangepicker(
      {
          ranges: { //.... }
      },
      function(start, end) { //.... }
    );

This is untested, but may work for you:

$("#my-date-range-picker").daterangepicker(
      {
          ranges: { //.... }
      },
      function(start, end) { //.... }
    ).change(function()
    {
        alert('Change() handler called');
    });

http://api.jquery.com/change/

Note that you'll have to place a custom event (in this case, pick-range) to trigger the creation of your daterangepicker. But that's the beauty of event delegation, it's always available regardless of binds

$(document).on('pick-range', '#my-date-range-picker', function(e){
   $(e.currentTarget).daterangepicker(
     {
      ranges: { //.... }
     },
     function(start, end) { //.... }
   );
});

// trigger it
$('#my-date-range-picker').trigger('pick-range');

http://jsfiddle.net/DZz8R/