gpt4 book ai didi

Jquery 不适用于 ajax 加载的内容 div

转载 作者:行者123 更新时间:2023-12-01 02:30:30 25 4
gpt4 key购买 nike

我在使用 jquery 和 ajax 使页面正常工作时遇到问题。我试图让这个例子尽可能简单。 jquery 在单个页面上时可以工作,但在调用后我无法让它工作。

2页,第一页:

<小时/>
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery-1.8.2.min.js"></script>
<style type='text/css'>
#one {
width: 200px;
height: 200px;
background: red;
}
#two{
width: 200px;
height: 200px;
background: blue;
}

.show {
display: none;
background: yellow;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("definition.jsp");
});
});
</script>
<script type="text/javascript">

$('#wrapper').on('mouseenter', '.touch', function() {
$(this).next('.show').fadeIn(800);
}).on('mouseleave', '.touch', function() {
$(this).next('.show').delay(800).fadeOut(800);
});
</script>
</head>
<body>

<div id="div1"><h2>jQuery AJAX Test</h2></div>
<button>Get External Content</button>

</body>

第二页:

<div id="wrapper">
<div id="parent_one">
<div class="touch" id="one">Enter</div>
<div class="show">Works</div>
</div>
<div id="parent_two">
<div class="touch" id="two">Enter</div>
<div class="show">Second Works</div>
</div>

有什么想法吗?请帮忙!

最佳答案

您无法将事件绑定(bind)到 #wrapper因为当页面加载时它不存在。相反,将其绑定(bind)到 document ,并附有查找 #wrapper .touch 的说明。仅当该元素添加到 DOM 后才会触发该事件。

更改第二个 <script> 中的内容标记为:

$(document).on('mouseenter', '#wrapper .touch', function() {
$(this).next('.show').fadeIn(800);
}).on('mouseleave', '#wrapper .touch', function() {
$(this).next('.show').delay(800).fadeOut(800);
});

Read what the jQuery API has to say about .on() .

注意:如果将事件绑定(bind)到 #div1 ,它将触发任何和所有 .touch您放入其中的元素,而不仅仅是 #wrapper 中的元素.

关于Jquery 不适用于 ajax 加载的内容 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18793215/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com