Event handler inside of event handler

Event handler inside of event handler

This is php string with is echoed out: 

   $('.$name input').on( 'blur', function(e){
            $('span.$name div ul').on('click', 'li', function(ev){
                var value = $(this).attr('value');
                var html = $(this).html();
                console.log(value);
                $('span.$name select').val( value );
                $('span.$name input').val( html );
                $('span.$name div').hide();
            });
        });

So I have a handler when its input loses focus and clicked on list item it does some stuff and hides the div. But I want to hide also when input loses focus and its NOT clicked on list element. 


If I try to do this:
   $('.$name input').on( 'blur', function(e){
            $('span.$name div ul').on('click', 'li', function(ev){
                var value = $(this).attr('value');
                var html = $(this).html();
                console.log(value);
                $('span.$name select').val( value );
                $('span.$name input').val( html );
               
            });
     $('span.$name div').hide();
        });

It just closes the div and ''click'' event handler doesnt work at all. No errors, nothing. How Can I fix my issue?
Thank  you 

EDITED: