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

问题描述 投票:1回答:4

鼠标悬停时触发的以下功能是尝试从动态生成的对象中获取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()这样的问题的点击事件?

jquery this mouseover
4个回答
0
投票

异步问题通常是类似问题的来源(您不能在它存在之前访问DOM节点),但在这种情况下似乎并不是这样。

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

该元素在event对象上可用(如event.target)。

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

function hoverdivOpen(e){
    console.log(e.target.innerHTML);
}
    <div onmouseover=hoverdivOpen(event)>test</div>

在jQuery等价物中 - 它允许你将html与脚本分开更多 - this指的是DOM元素而不是窗口,所以你使用它而不是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>

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>

更新问题的答案你正在混淆jQueryjavascript。你不能只使用$(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>

0
投票

首先,这不起作用的原因是因为当事件监听器启动时,该对象不是DOM的一部分。所以没有什么可听的。围绕它的方法是将事件监听器附加到父元素,然后委托(欢呼,@Sanchit)“关注”动态事件。所以,这是你的HTML:

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

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

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

0
投票

试试这个第一个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>
© www.soinside.com 2019 - 2024. All rights reserved.