0

我不明白为什么会这样，真的很奇怪。由于我是 Jquery 新手，我可能会遗漏一些东西。这是我的代码

<script type="text/javascript">
$(document).ready(function(){
$(".photos_container > a").mouseover(function() {
  $(this).fadeTo("slow", 0.6);
 }).mouseout(function(){
  $(this).fadeTo("slow", 1);
});

$('.pagination a').on('click', function(e){  
e.preventDefault();  
var link = $(this).attr('href');  
$('.tab-pane.active').html('Loading...');
$('.tab-pane.active').load(link+' .tab-pane.active > *');
});
});
</script>

HTML

<div class="photos_container tab-pane active" id="1">
    <a href="javascript:void(0)" data-name="Chameleon Minds" data-photo-medium="http://localhost/site/wp-content/uploads/2013/04/Chameleon-medium.png" data-title="Art Projects for Kids - Status : Client work">
        <img class="thumb_image" src="http://localhost/site/wp-content/uploads/2013/04/Final.png">
    </a>
    <div class="pagination">
        <a class="page-numbers" href="">1</a>
        <span class="page-numbers current">2</span>
    </div>
</div>
4

2 回答 2

1

没有看到你的 HTML 很难说，但如果.tab-pane.active包含.pagination a初始点击/鼠标悬停事件绑定的元素将被破坏。您可以使用事件委托解决此问题（绑定到不会被删除的包含元素 - 尽可能具体）。

$(document).on('click', ".pagination a", function (e) {
于 2013-04-18T01:34:40.770 回答
0 
$('.pagination a').on('click', fun…

在该行中，您将事件处理程序直接绑定到实时 DOM 元素（元素内的所有锚标记都带有类分页）。然后在事件处理程序中调用 jQuery 的 .load 方法覆盖部分 DOM。

$('.tab-pane.active').load(link…

问题是您覆盖的 DOM 部分包含您将事件侦听器绑定到的元素。

新内容被加载到“.tab-pane.active”区域。因此，您绑定单击处理程序的元素不再存在。它们已被删除并替换为新内容。因此，单击事件处理程序不再绑定到任何东西。

为了解决这个问题，您需要使用事件委托（有很多关于 javascript 中的事件委托的精彩文章）。Explosion Pills 的回答实际上是正确的，建议使用选择器绑定到文档以指定要执行的元素。

$(document).on('click', ".pagination a", function (e) {
    e.preventDefault();  
    var link = $(this).attr('href');
    $('.tab-pane.active').html('Loading...');
    $('.tab-pane.active').load(link);
});

您的代码中还有另一个错误。

$('.tab-pane.active').load(link+' .tab-pane.active > *');

+ 运算符是连接到 url 的字符串。我很确定这是一个错误。

于 2013-04-18T02:22:29.593 回答