jquery 通过html方法增加对象后hover失效怎办？
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body><inpu...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="button" type="button" value="button">
<div id="msg">
<ul>
<li class="list" onClick="test('a')" style="background:#0F3">a</li>
<li class="list" onClick="test('b')" style="background:#0Ff">b</li>
</ul>
<ul>
<li class="list" onClick="test('e')" style="background:#0F3">e</li>
<li class="list" onClick="test('f')" style="background:#0Ff">f</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="java.inc.bag/jquery-1.9.1.js"></script>
<script type="text/javascript">
document.getElementById("button").onclick = function(){
var inner = "<ul><li class=\"list\" onClick="\test('e')\" style=\"background:#0F3\">e</li><li class=\"list\" onClick=\"test('f')\" style=\"background:#0Ff\">f</li></ul>
";
$("#msg").html($("#msg").html()+inner);
}
function test(sign){alert(sign);}
$(".list").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#0F3");
});
</script>
jquery的hover事件监听所有的list类对象，开始运行点击弹出提示鼠标经过监听是正常的，然后点击button，通过html（）函数向页面内加入一组新的ul标签。加入元素成功，点击时弹出提示正常，但是hover失效，不仅是新添加的两个无效，而是所有的包括之前能正常相应的4个也都没有反应了。请问这个该怎么解决？
更正一下，刚才又试了一下
不用$("#msg").html($("#msg").html()+inner);这个写法
而是用$("#msg").append($(inner);这样可以保证原来的li正常响应监听事件。但是新加入的依旧不能响应hover。求解 展开
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="button" type="button" value="button">
<div id="msg">
<ul>
<li class="list" onClick="test('a')" style="background:#0F3">a</li>
<li class="list" onClick="test('b')" style="background:#0Ff">b</li>
</ul>
<ul>
<li class="list" onClick="test('e')" style="background:#0F3">e</li>
<li class="list" onClick="test('f')" style="background:#0Ff">f</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="java.inc.bag/jquery-1.9.1.js"></script>
<script type="text/javascript">
document.getElementById("button").onclick = function(){
var inner = "<ul><li class=\"list\" onClick="\test('e')\" style=\"background:#0F3\">e</li><li class=\"list\" onClick=\"test('f')\" style=\"background:#0Ff\">f</li></ul>
";
$("#msg").html($("#msg").html()+inner);
}
function test(sign){alert(sign);}
$(".list").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#0F3");
});
</script>
jquery的hover事件监听所有的list类对象，开始运行点击弹出提示鼠标经过监听是正常的，然后点击button，通过html（）函数向页面内加入一组新的ul标签。加入元素成功，点击时弹出提示正常，但是hover失效，不仅是新添加的两个无效，而是所有的包括之前能正常相应的4个也都没有反应了。请问这个该怎么解决？
更正一下，刚才又试了一下
不用$("#msg").html($("#msg").html()+inner);这个写法
而是用$("#msg").append($(inner);这样可以保证原来的li正常响应监听事件。但是新加入的依旧不能响应hover。求解 展开
展开全部
1.$("#msg").html($("#msg").html()+inner);
其实不是失效了，而是dom树改变了，#msg 里面的内容改变，就不是原来的 .list 了
2.$("#msg").append($(inner);
新加入的 $(inner) ，不在原本的 $('.list') 集合里，因此新加入的没有被绑定事件
我这给出两种做法：
① 在 #msg 内容改变后，给新加入 .list 绑定一次 hover；
② 将事件绑在 $(document) 上，例：
$(document).on('mouseover','.list',function(){
//...
});
不过方法②貌似没有hover写法。
仅供参考~
其实不是失效了，而是dom树改变了，#msg 里面的内容改变，就不是原来的 .list 了
2.$("#msg").append($(inner);
新加入的 $(inner) ，不在原本的 $('.list') 集合里，因此新加入的没有被绑定事件
我这给出两种做法：
① 在 #msg 内容改变后，给新加入 .list 绑定一次 hover；
② 将事件绑在 $(document) 上，例：
$(document).on('mouseover','.list',function(){
//...
});
不过方法②貌似没有hover写法。
仅供参考~
追问
嗯，这个跟我理解的差不多，（以前是学java的...下意识感觉是有个类似监听列表的东西需要更新）呵呵
请问第一种解决方案，具体该怎么写？
追答
$("#msg").append($(inner));后面加一次绑定
$(inner).hover(...)
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
$(function(){
$("#button").click(function(event) {
var inner = "<ul><li class=\"list\" onClick=\"test('e')\" style=\"background:#0F3\">e</li><li class=\"list\" onClick=\"test('f')\" style=\"background:#0Ff\">f</li></ul>";
$("#msg").append(inner);
});
$("#msg").on('mouseover', ".list", function(event) {
$(this).css("background","#F00");
}).on('mouseout', ".list", function(event) {
$(this).css("background","#0F3");
});
})
function test(sign){alert(sign);}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.9.0.min.js">
</script>
<script type="text/javascript">
jQuery(function($) {
$("#button").click(function()
{
var inner = '<ul><li class="list" onClick="test(\'e\')" style="background:#0F3">e</li><li class="list" onClick="test(\'f\')" style=\"background:#0Ff\">f</li></ul>';
$("div#msg").html($("div#msg").html() + inner);
});
$('div#msg').delegate("li.list", "mouseover mouseout", function(e) {
if (e.type == 'mouseover')
{
$(this).css("background", "#F00");
}
else if (e.type == 'mouseout')
{
$(this).css("background", "#0F3");
}
});
});
</script>
</head>
<body>
<input id="button" type="button" value="button">
<div id="msg">
<ul>
<li class="list" style="background: #0F3">a</li>
<li class="list" style="background: #0Ff">b</li>
</ul>
<ul>
<li class="list" style="background: #0F3">e</li>
<li class="list" style="background: #0Ff">f</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你加在最后试试，按理说是js顺序的问题。
你把hover事件单独拎出来，放到js文件的最后或者html的最后
你把hover事件单独拎出来，放到js文件的最后或者html的最后
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
