I want to make ajax call to module functuion I want on onclick event send some data to module and do some processing and get result back.

I have module name 'custom' and js code i have mentioned below. Url of page from where ajax call is made is 127.0.0.1/field-work

    Drupal.behaviors.custom = function (context, settings)
 {
    $(document).on('click', '#clear-filter', function() { 
    console.log("Hello");
    jQuery.ajax({
            type: 'POST',
            url: 'custom/field-work',
            dataType: 'json',
            success: function(data){
            console.log(data);
           },
        });
    });
};


Module code to receive ajax call have mentioned below.

function custom_menu() {
    $items['custom/field-work'] = array(
    'title' =&gt; t('foo AJAX'),
    'type' =&gt; MENU_CALLBACK,
    'page callback' =&gt; 'details_data',
    'access arguments' =&gt; array('access content'),
    );
    return $items;
}


From details_data i am returning some random data. But ajax call is not working. If i am removing drupal behaviour the js part is working fine.

Please help me out.
Please reread the documentation to drupal ajax documentation, particularly how Drupal behaviours do work.

You are missing one crucial part. Drupal calls the attach-function of your behaviour on documentReady or before DOM-elements get injected into the current document. As your JS-code does not have an attach-method, nothing happens. The code below should give you an idea how to fix your problem:

Drupal.behaviors.custom = function (context, settings) 
{
  attach: function(context, settings) {
    $(document).on('click', '#clear-filter', function() { 
      console.log("Hello");
      jQuery.ajax({
        type: 'POST',
        url: 'custom/field-work',
        dataType: 'json',
        success: function(data){
          console.log(data);
        },
      });
    });
  }
};