Capturing ‘Lost focus’ or ‘blur’ event for div, li or other non-input elements in Jquery

I was working on ‘ul-li’ structure in which I wanted to 
  1. show 2nd li when 1st li is focused and 
  2. hide it when 1st lose focus. 
I tried with ‘focus’ and ‘blur’ events, but ‘blur’ event was not being called for li element. Searching for answer on internet, I came to know that blur or lost focus event is fired when it’s an input element!

So I went for a work around that uses ‘mouseenter’ and ‘mouseleave’ events for ‘focus’ and ‘blur’ events respectively. This events can be used for ‘li’, ‘a’ as well as ‘div’ elements. IE7, 8, 9, Chrome and Firefox support these events. Below is the code that I have used.

$("#myFirstLiElement").mouseenter(function () {
              $("#mySecondLiElement").show();
       }).mouseleave(function () {      
              $("#mySecondLiElement").hide();
 });


Solution for JQuery dialogs being cached when loading partial views


Yesterday, I was working on Jquery dialog that provides an application form to edit user details.
The issue I was facing was, when I posted updated form and reopened it, it was still showing the previous details. When I checked database, the updated details were present!
This was happening with IE versions. Chrome and Firefox were able to show me updated data on form.

Below is the Jquery code that I was using to render a partial view in a dialog box.
var requestUrl = "/MyAction/PartialViewResult/";

$.get(requestUrl, function(){
$("#dialog-edit-profile").dialog({
        title: "Edit Profile",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });
        $('# dialog-edit-profile).dialog("open");
});

I looked at the code and was confused why IE is behaving strange when code is syntactically correct. 
I went for solution search on internet and found a fact that default behavior of IE is to cache the Jquery dialog content!
Considering this fact, I rewrite my code so that each request for dialog will be a new request. The solution was pretty simple, i.e. to make an ajax call with “cache: false” property.

var requestUrl = "/MyAction/PartialViewResult/";

$.ajax({
              url: requestUrl,
              cache: false,   
              success: function(result) {
                   $("#dialog-edit-profile").dialog({
                      title: "Edit Profile",
                      autoOpen: false,
                      height: 300,
                      width: 500,
                      modal: true
                  });

                  $('# dialog-edit-profile).dialog("open");
              }
});
Post this fix, I tested it on IE  7,8,9 as well as Chrome and Firefox and all were rendering dialog correctly!