隐藏在鼠标上的数据报警器

Question

当用户将鼠标移离处于活动状态的输入时，我需要隐藏一个数据报警器。当它工作的时候，它的工作有点太好了。它还隐藏了当我试图鼠标对它的数据报警器。调整div的大小也不是最好的方法，因为这是一个动态生成的数据输入表单。并且只有日期字段是用.兽群-evt类生成的。

我需要知道如何进行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;，当您再次鼠标移动时，可能需要对其进行修改。