Question

鼠标悬停时触发的以下功能是尝试从动态生成的对象中获取html文本;它返回undefined（我试图得到“测试”）

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。相反，您可以在函数中使用this关键字传递对div的引用，并从innetHTML

中获取javascript

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）“关注”动态事件。所以，这是你的HTML：

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

在那里，你将拥有试图鼠标悬停的动态元素（分配一个公共类）。所以听众看起来像：

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

Answer 3

尝试这个第一个div mouseover调用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，并且您不需要通过类名来用作选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

在jQuery等价物中 - 它允许你将html与脚本分开一些 - this引用DOM元素而不是窗口，所以你使用它而不是{{1} }：

＆＃13;

event

＆＃13;

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

＆＃13;

Jquery THIS用于动态生成的div上的mouseover事件

4 个答案: