jQuery-悬停在动态创建的元素setTimeout上

jQuery - hover on dynamically created element setTimeout

本文关键字：元素 setTimeout 创建 悬停 动态 jQuery-      更新时间：2023-09-26

我试图在悬停一秒钟后触发一个操作（元素是动态创建的），如果光标被移出，我想设置Timeout=null；

$("nav").on("mouseover", ".dropDown ul li", function (ev) {
    var id = ev.target.id,
        timeoutId = null;
    $("#" + id).hover(function () {
        if (timeoutId === null) {
            timeoutId = window.setTimeout(function () {
                timeoutId = null;
                alert(id);
            }, 1000);
        }
    },            
    function () {
        if (timeoutId !== null) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        }
    })
});

您尝试注册动态悬停处理程序的方式是错误的，您可以将事件委派与mouseenter和鼠标保存事件（如）一起使用

$("nav").on({
    mouseenter: function (ev) {
        var $this = $(this);
        var timeoutId = window.setTimeout(function () {
            console.log($this.attr('id'));
            $this.removeData('timeoutId');
        }, 1000);
        $this.data('timeoutId', timeoutId);
    },
    mouseleave: function (ev) {
        var $this = $(this),
            timeoutId = $this.data('timeoutId');;
        $this.removeData('timeoutId');
        clearTimeout(timeoutId);
    }
}, ".dropDown ul li");


$("nav").on({
  mouseenter: function(ev) {
    var $this = $(this);
    var timeoutId = window.setTimeout(function() {
      $this.removeData('timeoutId');
      //do your stuff here            
      console.log($this.attr('id'));
    }, 1000);
    $this.data('timeoutId', timeoutId);
  },
  mouseleave: function(ev) {
    var $this = $(this),
      timeoutId = $this.data('timeoutId');;
    $this.removeData('timeoutId');
    clearTimeout(timeoutId);
  }
}, ".dropDown ul li");
//add more dynamic items
for (var i = 4; i < 7; i++) {
  $('<li />', {
    id: i,
    text: i
  }).appendTo('ul')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <div class="dropDown">
    <ul>
      <li id="1">1</li>
      <li id="2">2</li>
      <li id="3">3</li>
    </ul>
  </div>
</nav>

相关文章：