Question

To show .timePickr I need to do double hover and move mouse to another place before I see the .timePiker box when I use live event.

How can me make it by one hover ?

$(".timePickr").live('hover', function() {
    $(function(){
        $(".timePickr").timepickr();
    });
});

Answer 1

The problem is that you’re adding the timepicker to the input after the hover event has been fired. The timepicker won’t be shown until the next time you hover.

There are two options. Either you trigger the hover event again:

$(function() {
  $(".timePickr").live('hover', function() {
    $(this).timepickr();
    $(this).hover();
  });
});

A better option is to move the code to apply the time picker in the document load function, or whenever you dynamically introduce new elements.

$(function() {
  $(".timePickr").timepickr();
});

//Somewhere else
$.get("someurl", null, function(data) {
  $("#some-div").html(data);
  $(".timePickr").timepickr();
});