如何让可点击的div和ajax加载一起工作

Question

更新4:

我有一种可怕的感觉,这已经下滑到目前为止没有人再看到它......但为了以防万一......

我试图结合可点击的div代码和ajax加载代码(参见下面的主要代码块)每次我添加可点击的div代码时,加载停止工作.我试过了:

$(".work").on('click',function(){
  window.location=$(this).find("a").attr("href");
});

$('.work a').on('click',function(event) {
    event.preventDefault();
 etc

这个

 $('div.work').on ('click',function(event) {

    window.location=$(this).find("a").attr("href");

    $(this).attr("href"); event.preventDefault();   

和许多其他排列 - 但他们都停止.load工作

已经耗尽了想法并变得绝望 - 请....

更新3:

还在努力解决这个问题......

更新2

由于下面的答案不断获得投票(即使我不确定为什么它适用...)我尝试了以下内容:首先我更新到jQuery 1.7.1并使用.on作为可点击的div代码:

$(".work").on('click',function(){
  window.location=$(this).find("a").attr("href");
});

这没有任何区别,所以我尝试将它应用于ajax加载代码:

$('div.clickable, .work a').on('click',function(event) {
    event.preventDefault();
etc

这没有任何区别......

我真的很感激为什么.live(.on)适用于这种情况,当我不想影响ajax加载的任何东西时...至少有4个成员认为它是......

更新:

如果有帮助,您可以在下面看到2个不同的版本.第一个显示了ajax负载的发生.第二个只是为可点击的div添加代码,这会阻止ajax加载工作:

http://www.spiritlevel.co.uk/clicktest/ajaxload.html

http://www.spiritlevel.co.uk/clicktest/divclick.html

原始邮寄:

我有一个div元素(.work),它包含一个h3标签,其中包含一个锚点,在单击时将ajax内容加载到另一个div(.pictures)中.

HTML看起来像这样:

<div class="work">
 <img class="introPic" src="images/thumb.jpg" width="250" height="99" />
 <h3><img class="arrow" src="images/arrow_open.gif" alt="&gt;" /><a class="titlelink" href="project2.html">Project 2</a></h3>
  <div class="projectIntro">
    <p>This is some intro text for project 2</p>
  </div>
 <div class="pictures"></div>
</div>

我使用此代码可以正常运行ajax:

jQuery(function($) {
// Adds the open and close effect for anchor links showing work.    

$('.work a').click(function(event) {
    event.preventDefault();     

    var parent = $(this).parents(".work");
    var content_holder = parent.children(".pictures");

    if (parent.hasClass("selected_work")) {
        close_other();
        return;
    }

    close_other();

    parent.addClass("selected_work");

    content_holder.load(this + " #ajaxContent", function() {
        $(this).find('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
    animSpeed:300,
    pauseTime:4000,
    controlNav:true,
    pauseOnHover:true //Stop animation while hovering
});
     });

    $('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
});

function close_other() {
    var selected_work = $('.selected_work');

    selected_work.children('.pictures').empty();    
    $('.selected_work img.arrow').attr("src", "images/arrow_open.gif");
    selected_work.removeClass("selected_work")
}

$('.work a.titlelink').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
     });

});  

现在我想让整个.work div可以点击,我找到了一些我工作过的代码:

$(document).ready(function(){
  var block = $(".work");
  block.click(function(){
    window.location = $(this).find("a:first").attr("href")
   });
   block.addClass("clickable");
   block.hover(function(){
     window.status = $(this).find("a:first").attr("href")
   }, function(){
      window.status = ""
   })
});

由于某些原因,我无法得到可点击的div代码的更短和更常见的版本...这不是我的主要问题,但如果有人能告诉我原因会很好:

$(".work").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});

我的主要问题是虽然我可以单独使用可点击的div代码和ajax加载代码,但我无法让它们一起工作.如果首先是可点击的div代码,则锚点链接到新页面而不是将它们加载到同一页面中.如果首先出现ajax加载代码,则忽略可点击的div代码......

我还想确保单击.work div时我的滚动仍然有效,就像单击h3链接时一样 - 即这段代码:

$('.work a.titlelink').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
     });

希望社区中的一位善意的成员可以帮助我解决这个问题!

谢谢

Answer 1

我认为问题在于您将"点击"事件绑定到尚不存在的元素 - 仅在ajax加载后才存在.我对吗？

在这种情况下,您需要使用jQuery的"实时"方法

此方法提供了将委托事件处理程序附加到页面的文档元素的方法,这简化了在将内容动态添加到页面时使用事件处理程序的方法.

例如:

$(".work").live('click', function(){
    window.location=$(this).find("a").attr("href"); return false;
});