Jquery 这用于动态生成的鼠标悬停事件 div

Question

鼠标悬停时触发的以下函数正在尝试从动态生成的对象中获取 html 文本；它 returns 未定义（我正在尝试获取 "test"）

HTML (generated by php):
<div class="info" onmouseover=hoverdivOpen(event,"popupUserInfoDiv")>test</div>

JS:
function hoverdivOpen(e,divid){
  var v = $(this).text();
  console.log(v);
 // ... rest of code to open the popup div....//
}

有没有办法像 on() 那样处理点击事件的问题？

Answer 1

是的，您可以像这样将 .on() 委托事件处理与 mouseenter、mouseover 和 mouseleave 一起使用 $(document).on("mouseover", "input", function() {});

$("body").append('<input type="text" value="Hello World">');
$(document).on("mouseover", "input", function() {
    console.log( "Hi!" + $(this).val()); // jQuery 1.4.3+
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

更新问题的答案 您将 jQuery 与 javascript 混淆了。您不能只在函数内部使用 $(this) 来引用 div。相反，您可以在传递对 div 的引用的函数中使用 this 关键字，并从 javascript

中获取 innetHTML

function hoverdivOpen(e){
  var v =e.innerHTML;
  console.log(v);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover=hoverdivOpen(this)>test</div>

Answer 2

首先，这不起作用的原因是事件侦听器启动时该对象不属于 DOM。所以没有什么可听的。绕过它的方法是将事件侦听器附加到父元素，然后 委托给 （干杯，@Sanchit） "focus" 在动态事件上。所以，假设这是你的 HTML:

<div id="my-wrapper"><!-- DYNAMIC ELEMENTS GO HERE --></div>

在那里，您将拥有动态元素（分配一个公共 class），您正试图将鼠标悬停在这些元素上。所以监听器看起来像：

$("#my-wrapper").on("mouseover", ".common-class", function () {
  $(this).text(); // DO SOMETHING
});

Answer 3

先试试这个 div 鼠标悬停调用 javascript 函数，第二个 div 使用 jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div onMouseOver="hoverdivOpen('.test')" class="test">test</div>
<div id="popupUserInfoDiv"> 123 </div>
<script>
function hoverdivOpen(divid){
  var v = $(divid).text();
  console.log(v);
  alert(v);
}
$(document).ready(function(){
$('#popupUserInfoDiv').on('mouseover',function(){
alert($(this).text());
});
})
</script>

Answer 4

异步问题通常是类似问题的根源（您无法在 DOM 节点存在之前访问它），但在本例中似乎并非如此。

在调用鼠标悬停功能的上下文中，this 指的是 window 对象，而不是触发事件的元素。

元素在 event 对象上可用（如 event.target）。

您可以使用 innerHTML 获取其内容 -- 不需要 jQuery，并且您不需要通过 class 名称来用作选择器。

function hoverdivOpen(e){
    console.log(e.target.innerHTML);
}

    <div onmouseover=hoverdivOpen(event)>test</div>

在 jQuery 等效项中——它允许您将 html 与脚本分开更多一点——this 指的是 DOM 元素而不是window，所以你用它代替 event:

$('#foo').on("mouseover", function() {
  console.log($(this).html()); // jQuery equivalent to this.innerHTML
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">test</div>

Jquery 这用于动态生成的鼠标悬停事件 div

Jquery THIS for mouseover event on dynamically generated div

jquery

this

mouseover