Question

当用户将鼠标移离datepicker处于活动状态的输入时，我需要隐藏一个日期选择器。虽然它有效，但它有点太好了。当我尝试将鼠标悬停在它上面时，它也会隐藏日期选择器。调整div的大小并不是最好的主意，因为这是一个动态生成的数据输入表单。并且只使用.herd-evt-date类生成日期字段。

如果我远离文本框而不是日期选择器，我需要知道如何进行jquery检查。如何做到这一点？

$('#herd-evt-entry-tbl').on('focus','.herd-evt-date',function() {
  $(this).datepicker({
    onSelect: function() {this.focus();},
    onClose: function() {this.focus();},
    dateFormat: 'dd-mm-yy'
  });
});
$('#herd-evt-entry-tbl').on('mouseleave','.herd-evt-date',function() {
  $(this).datepicker('hide');
});

HTML：

<div id='herd-evt-menu-div'></div>
<div id='herd-evt-detail-div'>
  <h2><div id='herd-evt-name-div'>Mating Event</div></h2>
  <button id='herd-evt-back-btn'><-Back</button>
  <button id='herd-evt-columns-btn'>Column Info</button>
  <button id='herd-evt-file-upload-btn'>Upload File</button>
  <button id='herd-evt-save-btn'>Save Valid</button>
  <input type='hidden' id='herd-load-id-hdn' value='0' />
  <input type='hidden' id='herd-evt-id-hdn' value='0' />
  <table id='herd-evt-entry-tbl' border=1></table>
</div>
<div class='herd-event-columninfo-display'>
 <div><button id='herd-event-columninfo-close-btn'>X</button></div>
 <table id='herd-evt-columninfo-tbl'></table>
 <button id='herd-evt-columninfo-upd-btn'>Update</button>
</div>
<div class='herd-evt-dup'>
  <button style='float: right; ' id='herd-evt-dup-close'>X</button>
  <table id='herd-evt-dup-tbl'>
    <thead><th></th><th>Stig</th><th>Tattoo</th><th>Ident</th><th>Herdstat</th><th>State Day</th><th>Sex</th><th>Gen Level</th><th>Transponder</th><th>French Ident</th></thead>
    <tbody></tbody>
  </table>
</div>
</div></td></tr></table>
<div style='clear: both'/>
  </div>
</div>

Answer 1

你可以像这样接近它：

$("#herd-evt-entry-tbl").hover(function () {
     // Do something on Mouse Over.
}, function () {
    // Do something on Mouse Off.
});

因此，如果整个div是元素herd-evt-entry-tbl，那么当div元素悬停或关闭时，它将执行您的任务。它还可以将display重新绑定到您的可见对象。您的行$(this).datepicker('hide');实际应用display: none;，您可能需要在再次鼠标移动时进行修改。

Datepicker隐藏在鼠标悬停上

1 个答案: