动态元素并监听它们上的事件

Question

我在页面上有一封电子邮件列表。

 echo "<div class='comms'>";
 $sel = "SELECT * from emails where customerId=:custId";
 $stmt = $db->prepare($sel);
 $stmt->bindParam(':custId',$_POST['custId']);
 $stmt->execute();
 while($r = $stmt->fetch())
 {
    echo "<li class='emails'>" . $r['date']. " " . substr($r['data'],0,15) . "....</li>";
 }
 echo "</div>";

我还每分钟都有一个ajax呼叫来检查新电子邮件。

    var getMail = function(){
            var custId = "<?php echo $_POST['custId'];?>";
    $.ajax({
            type:"POST",
                    url:"installManager/getMail.php",
                    data:"custId="+custId,
            success: function(result){
                    $('.comms').html(result);
            }
            });
    }
    var interval = 1000 * 60 * 1;
    setInterval(getMail,interval);

我正在尝试设置侦听事件以将鼠标悬停在这些新创建的li上。

    $('.emails').on('mouseover',$('li'),function(){
                    alert('this is an email');
    });

Ajax触发后，悬停不会触发。 我究竟做错了什么？

Answer 1

尝试这个

$('.comms').on('mouseover', 'li.emails', function(){
   alert('this is an email');
});

Answer 2

您的.emails元素将被替换，因此您需要再次绑定悬停操作或使用动态绑定：

$('.comms').on('mouseover', '.emails', function(){
    alert('this is an email');
});