jquery: slideToggle和scrollTo在ajax加载的html文件中不起作用

Question

我现在正在写我的新作品集。要查看我遇到的问题，您可以转到http://www.zeiteffekt.de/relaunch/#mmd并单击“详细信息”。在通过ajax加载新的html文件时，会出现滑动切换效果。

$(".show_details").click(function(){            
        $("#mmd_details").slideToggle("slow");
    });

$(document).ready(function() {
      // select all the links with class="load_content", when one of them is clicked, get its "href" value
      // adds a "loading..." notification, load the content from that URL and
      $('a.load_content').click(function() {
        var url = $(this).attr('id');
        $('#mmd_details').html('Laden...').load(url);
        return false;
      });
    });

我的问题如下:我在html文件中有一个简单的'close‘链接，这个链接是由ajax加载的，它不会切换div容器。当我点击初始的“详细信息”链接时，它将关闭div。加载的html中的相同链接不会做到这一点。

此外，当在ajax加载的html文件中使用scrollTo时，它也不起作用。

这是滚动功能：

$(document).ready(function() {
        $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);
        });
    });

我完全不知道为什么jquery脚本不能在ajax文件中工作。我希望你能帮助我。

干杯，蒂姆

Answer 1

当页面加载完成时，jQuery将它的事件处理程序绑定到dom。如果你后来添加到dom中，比如通过ajax，jQuery并不知道新的元素。

根据您的jQuery版本，您需要使用'on‘或'live’。

Answer 2

我没有使用过jQuery.load()，但是文档( http://api.jquery.com/load/ )没有指出加载的HTML中的任何内联脚本都会被计算。

它指定您可以将回调函数传递到load()中，我认为这是您最好的选择：

$('#mmd_details').html('Laden...').load(url, function() {
  $(".scroll").click(function(event){     
     event.preventDefault();
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);
  });
});

每当我使用jQuery的'on‘bind方法时，我总是需要至少有一个元素与DOM中的选择器匹配，这样它才能绑定到未来的元素。我可能没有正确地使用它，所以我愿意接受更正:)